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

export type ButtonProps = JSX.IntrinsicElements["button"] & {
  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive"
  size?: "sm" | "md" | "lg"
}

export const Button: FC<ButtonProps> = (props) => {
  const { variant = "primary", size = "md", class: className, ...buttonProps } = props

  const baseClasses = [
    "inline-flex",
    "items-center",
    "justify-center",
    "font-medium",
    "transition-colors",
    "focus-visible:outline-none",
    "focus-visible:ring-2",
    "focus-visible:ring-offset-2",
    "disabled:pointer-events-none",
    "disabled:opacity-50",
    "cursor-pointer",
    "rounded-sm",
  ]

  const variantClasses = {
    primary: "bg-primary text-primary-foreground hover:bg-primary/90",
    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
    outline: "border border-border bg-background text-foreground hover:bg-secondary",
    ghost: "text-foreground hover:bg-secondary",
    destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
  }

  const sizeClasses = {
    sm: "h-8 px-3 text-sm",
    md: "h-10 px-4 text-sm",
    lg: "h-12 px-6 text-base",
  }

  const classes = [...baseClasses, variantClasses[variant], sizeClasses[size], className]
    .filter(Boolean)
    .join(" ")

  return <button {...buttonProps} class={classes} />
}

export const Test = () => {
  return (
    <div class="p-6 space-y-8">
      {/* Variants */}
      <div>
        <h2 class="text-xl font-bold mb-4">Button Variants</h2>
        <div class="flex gap-4">
          <Button variant="primary">Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="outline">Outline</Button>
          <Button variant="ghost">Ghost</Button>
          <Button variant="destructive">Destructive</Button>
        </div>
      </div>

      {/* Sizes */}
      <div>
        <h2 class="text-xl font-bold mb-4">Button Sizes</h2>
        <div class="flex items-end gap-4">
          <Button size="sm">Small</Button>
          <Button size="md">Medium</Button>
          <Button size="lg">Large</Button>
        </div>
      </div>

      {/* With custom content */}
      <div>
        <h2 class="text-xl font-bold mb-4">Custom Content</h2>
        <div class="flex gap-4">
          <Button variant="primary">
            <span>🚀</span>
            <span class="ml-2">Launch</span>
          </Button>
          <Button variant="outline" class="flex-col h-20 w-24">
            <span class="text-2xl">💳</span>
            <span class="text-xs mt-1">Card</span>
          </Button>
        </div>
      </div>

      {/* Native attributes work */}
      <div>
        <h2 class="text-xl font-bold mb-4">Native Attributes</h2>
        <div class="flex gap-4">
          <Button onClick={() => alert("Clicked!")} variant="primary">
            Click Me
          </Button>
          <Button disabled variant="secondary">
            Disabled
          </Button>
          <Button type="submit" variant="outline">
            Submit
          </Button>
        </div>
      </div>
    </div>
  )
}
