import * as React from "react"
import { cn } from "@/lib/utils"

type Variant = "primary" | "secondary" | "ghost" | "danger" | "outline"
type Size = "sm" | "md"

export const buttonStyles = ({
  variant = "primary",
  size = "md",
  className,
}: {
  variant?: Variant
  size?: Size
  className?: string
} = {}) =>
  cn(
    "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold-500/40",
    size === "sm" ? "h-8 px-3 text-xs" : "h-10 px-4 text-sm",
    variant === "primary" &&
      "bg-gold-500 text-ink-900 hover:bg-gold-600 shadow-sm",
    variant === "secondary" &&
      "bg-ink-900 text-gold-50 hover:bg-ink-800 shadow-sm",
    variant === "outline" &&
      "border border-border bg-card text-foreground hover:bg-muted",
    variant === "ghost" && "text-foreground hover:bg-muted",
    variant === "danger" && "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
    className,
  )

export const Button = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: Variant; size?: Size; isLoading?: boolean }
>(function Button({ className, variant = "primary", size = "md", isLoading, children, disabled, ...props }, ref) {
  return (
    <button 
      ref={ref} 
      {...props} 
      disabled={isLoading || disabled}
      className={buttonStyles({ variant, size, className })}
    >
      {isLoading ? (
        <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
      ) : null}
      {children}
    </button>
  )
})
