import { Section } from "./section"
import { H2, Text } from "./text"
import "hono/jsx"
import type { FC, JSX } from "hono/jsx"
import { VStack, HStack } from "./stack"
import { CodeExamples } from "./code"
import { cn } from "./cn"

export type AvatarProps = JSX.IntrinsicElements["img"] & {
  size?: number
  rounded?: boolean
}

export const Avatar: FC<AvatarProps> = (props) => {
  const { src, size = 32, rounded, class: className, style, id, ref, alt = "", ...rest } = props

  const avatarStyle: JSX.CSSProperties = {
    width: `${size}px`,
    height: `${size}px`,
    borderRadius: rounded ? "9999px" : undefined,
    ...(style as JSX.CSSProperties),
  }

  return <img src={src} alt={alt} class={cn("Avatar", className)} style={avatarStyle} id={id} ref={ref} {...rest} />
}

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 (
    <Section>
      {/* API Usage Examples */}
      <CodeExamples
        examples={[
          '<Avatar src="/user.jpg" />',
          '<Avatar src="/user.jpg" size={64} />',
          '<Avatar src="/user.jpg" size={48} rounded />',
          '<Avatar src="/user.jpg" style={{ border: "2px solid blue" }} />',
        ]}
      />

      {/* Size variations */}
      <VStack gap={4}>
        <H2>Size Variations</H2>
        <HStack gap={4}>
          {[24, 32, 48, 64, 96].map((size) => (
            <VStack key={size} h="center" gap={2}>
              <Avatar src={sampleImages[0]!} size={size} alt="Sample" />
              <Text>
                {size}x{size}
              </Text>
            </VStack>
          ))}
        </HStack>
      </VStack>

      {/* Rounded vs Square */}
      <VStack gap={4}>
        <H2>Rounded vs Square</H2>
        <HStack gap={6}>
          <VStack h="center" gap={2}>
            <Avatar src={sampleImages[0]!} size={64} alt="Sample" />
            <Text>Square</Text>
          </VStack>
          <VStack h="center" gap={2}>
            <Avatar src={sampleImages[0]!} size={64} rounded alt="Sample" />
            <Text>Rounded</Text>
          </VStack>
        </HStack>
      </VStack>

      {/* Different images */}
      <VStack gap={4}>
        <H2>Different Images</H2>
        <HStack gap={4}>
          {sampleImages.map((src, index) => (
            <VStack key={src} h="center" gap={2}>
              <Avatar src={src} size={64} rounded alt={`Sample ${index + 1}`} />
              <Text>Image {index + 1}</Text>
            </VStack>
          ))}
        </HStack>
      </VStack>

      {/* Custom styles */}
      <VStack gap={4}>
        <H2>With Custom Styles</H2>
        <HStack gap={6}>
          <VStack h="center" gap={2}>
            <Avatar
              src={sampleImages[0]!}
              size={64}
              rounded
              style={{ border: "4px solid #3b82f6" }}
              alt="With border"
            />
            <Text>With Border</Text>
          </VStack>
          <VStack h="center" gap={2}>
            <Avatar
              src={sampleImages[1]!}
              size={64}
              rounded
              style={{ boxShadow: "0 10px 15px rgba(0, 0, 0, 0.3)" }}
              alt="With shadow"
            />
            <Text>With Shadow</Text>
          </VStack>
          <VStack h="center" gap={2}>
            <Avatar
              src={sampleImages[2]!}
              size={64}
              rounded
              style={{ border: "4px solid #22c55e", boxShadow: "0 10px 15px rgba(0, 0, 0, 0.3)" }}
              alt="Border + shadow"
            />
            <Text>Border + Shadow</Text>
          </VStack>
        </HStack>
      </VStack>
    </Section>
  )
}