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

export type ImageProps = {
  src: string
  alt?: string
  class?: string
}

export const Image: FC<ImageProps> = ({ src, alt, class: className }) => {
  return <img src={src} alt={alt} class={className} />
}

export const Test = () => {
  const sampleImages = [
    "https://picsum.photos/seed/1/400/600", // Portrait
    "https://picsum.photos/seed/2/600/400", // Landscape
    "https://picsum.photos/seed/3/300/300", // Square
    "https://picsum.photos/seed/4/200/100", // Small image
  ]

  return (
    <div class="p-6 space-y-8">
      <h2 class="text-xl font-bold mb-4">Image Examples with Tailwind Classes</h2>

      {/* Size variations */}
      <div>
        <h3 class="text-lg font-semibold mb-4">Size Variations</h3>
        <div class="flex gap-4 flex-wrap">
          <div class="flex flex-col space-y-2">
            <Image src={sampleImages[0]} class="w-16 h-16 object-cover" alt="16x16" />
            <p class="text-sm">w-16 h-16</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image src={sampleImages[0]} class="w-24 h-24 object-cover" alt="24x24" />
            <p class="text-sm">w-24 h-24</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image src={sampleImages[0]} class="w-32 h-32 object-cover" alt="32x32" />
            <p class="text-sm">w-32 h-32</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image src={sampleImages[0]} class="w-48 h-32 object-cover" alt="48x32" />
            <p class="text-sm">w-48 h-32</p>
          </div>
        </div>
      </div>

      {/* Object fit variations */}
      <div>
        <h3 class="text-lg font-semibold mb-4">Object Fit Variations</h3>
        <p class="text-sm text-gray-600 mb-4">Same image with different object-fit classes</p>
        <div class="flex gap-6 flex-wrap">
          <div class="flex flex-col space-y-2">
            <Image src={sampleImages[0]} class="w-32 h-32 object-cover border" alt="Object cover" />
            <p class="text-sm">object-cover</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image
              src={sampleImages[0]}
              class="w-32 h-32 object-contain border bg-gray-100"
              alt="Object contain"
            />
            <p class="text-sm">object-contain</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image src={sampleImages[0]} class="w-32 h-32 object-fill border" alt="Object fill" />
            <p class="text-sm">object-fill</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image
              src={sampleImages[0]}
              class="w-32 h-32 object-scale-down border bg-gray-100"
              alt="Object scale-down"
            />
            <p class="text-sm">object-scale-down</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image src={sampleImages[0]} class="w-32 h-32 object-none border bg-gray-100" alt="Object none" />
            <p class="text-sm">object-none</p>
          </div>
        </div>
      </div>

      {/* Styling examples */}
      <div>
        <h3 class="text-lg font-semibold mb-4">Styling Examples</h3>
        <div class="flex gap-6 flex-wrap">
          <div class="flex flex-col space-y-2">
            <Image
              src={sampleImages[0]}
              class="w-32 h-32 object-cover rounded-lg border-4 border-blue-500"
              alt="Rounded with border"
            />
            <p class="text-sm">Rounded + Border</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image src={sampleImages[1]} class="w-32 h-32 object-cover shadow-lg" alt="With shadow" />
            <p class="text-sm">With Shadow</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Image
              src={sampleImages[2]}
              class="w-32 h-32 object-cover rounded-full border-4 border-green-500 shadow-lg"
              alt="Circular with effects"
            />
            <p class="text-sm">Circular + Effects</p>
          </div>
        </div>
      </div>

      {/* Responsive sizing */}
      <div>
        <h3 class="text-lg font-semibold mb-4">Responsive Sizing</h3>
        <div class="space-y-4">
          <div>
            <Image src={sampleImages[0]} class="w-full h-48 object-cover rounded" alt="Full width" />
            <p class="text-sm mt-2">w-full h-48 (responsive width)</p>
          </div>
          <div class="flex gap-4">
            <Image
              src={sampleImages[1]}
              class="w-16 sm:w-24 md:w-32 lg:w-48 h-24 object-cover rounded"
              alt="Responsive sizes"
            />
            <div>
              <p class="text-sm">w-16 sm:w-24 md:w-32 lg:w-48</p>
              <p class="text-xs text-gray-600">Resize window to see changes</p>
            </div>
          </div>
        </div>
      </div>

      {/* Common use cases */}
      <div>
        <h3 class="text-lg font-semibold mb-4">Common Use Cases</h3>
        <div class="space-y-6">
          {/* Avatar */}
          <div>
            <h4 class="font-medium mb-2">Avatar</h4>
            <Image src={sampleImages[0]} class="w-12 h-12 rounded-full object-cover" alt="Avatar" />
          </div>

          {/* Card image */}
          <div class="max-w-sm">
            <h4 class="font-medium mb-2">Card Image</h4>
            <div class="border rounded-lg overflow-hidden">
              <Image src={sampleImages[1]} class="w-full h-48 object-cover" alt="Card image" />
              <div class="p-4">
                <h5 class="font-medium">Card Title</h5>
                <p class="text-sm text-gray-600">Card description goes here</p>
              </div>
            </div>
          </div>

          {/* Gallery grid */}
          <div>
            <h4 class="font-medium mb-2">Gallery Grid</h4>
            <div class="grid grid-cols-3 gap-2">
              {sampleImages.map((src, i) => (
                <Image
                  key={i}
                  src={src}
                  class="w-full aspect-square object-cover rounded"
                  alt={`Gallery ${i}`}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
