import "hono/jsx"
import { FC } from "hono/jsx"

export type AvatarProps = {
  src: string
  alt?: string
  class?: string
  size?: string // Tailwind size class (e.g., "8", "12", "16")
  rounded?: boolean
}

export const Avatar: FC<AvatarProps> = (props) => {
  let { size = "8", rounded, class: className } = props

  // Build class names
  const sizeClasses = [`w-${size}`, `h-${size}`]
  const roundedClass = rounded ? "rounded-full" : ""

  const combinedClassName = [className, ...sizeClasses, roundedClass].filter(Boolean).join(" ")

  return <img src={props.src} alt={props.alt} class={combinedClassName} />
}

export const Test = () => {
  const sampleImages = [
    "https://picsum.photos/seed/3/200/200",
    "https://picsum.photos/seed/2/200/200",
    "https://picsum.photos/seed/8/200/200",
    "https://picsum.photos/seed/9/200/200",
  ]

  return (
    <div class="p-6 space-y-8">
      {/* Size variations */}
      <div>
        <h2 class="text-xl font-bold mb-4">Size Variations</h2>
        <div class="flex gap-4">
          {["6", "8", "12", "16", "24"].map((size) => (
            <div key={size} class="flex flex-col space-y-2">
              <Avatar src={sampleImages[0]} size={size} alt="Sample" />
              <p class="text-sm">
                w-{size} h-{size}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Rounded vs Square */}
      <div>
        <h2 class="text-xl font-bold mb-4">Rounded vs Square</h2>
        <div class="flex gap-6">
          <div class="flex flex-col space-y-2">
            <Avatar src={sampleImages[0]} size="16" alt="Sample" />
            <p class="text-sm">Square</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Avatar src={sampleImages[0]} size="16" rounded alt="Sample" />
            <p class="text-sm">Rounded</p>
          </div>
        </div>
      </div>

      {/* Different images */}
      <div>
        <h2 class="text-xl font-bold mb-4">Different Images</h2>
        <div class="flex gap-4">
          {sampleImages.map((src, index) => (
            <div key={src} class="flex flex-col space-y-2">
              <Avatar src={src} size="16" rounded alt={`Sample ${index + 1}`} />
              <p class="text-sm">Image {index + 1}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Custom classes */}
      <div>
        <h2 class="text-xl font-bold mb-4">With Custom Classes</h2>
        <div class="flex gap-6">
          <div class="flex flex-col space-y-2">
            <Avatar
              src={sampleImages[0]}
              size="16"
              rounded
              class="border-4 border-blue-500"
              alt="With border"
            />
            <p class="text-sm">With Border</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Avatar src={sampleImages[1]} size="16" rounded class="shadow-lg" alt="With shadow" />
            <p class="text-sm">With Shadow</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Avatar
              src={sampleImages[2]}
              size="16"
              rounded
              class="border-4 border-green-500 shadow-lg"
              alt="Border + shadow"
            />
            <p class="text-sm">Border + Shadow</p>
          </div>
        </div>
      </div>
    </div>
  )
}
