import { type ButtonHTMLAttributes, type Ref } from "react";

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

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  loading?: boolean;
  ref?: Ref<HTMLButtonElement>;
}

// Primary uses dark text on the gold accents so contrast clears WCAG AA
// in both base and hover states. accent-500 + zinc-950 is ~7.9:1,
// accent-400 (hover) + zinc-950 is ~9.5:1; white text on the same
// backgrounds is ~2.6:1 and would fail.
const VARIANT_CLASSES: Record<Variant, string> = {
  primary: "bg-accent-500 text-zinc-950 hover:bg-accent-400 active:scale-[0.98] transition-transform",
  secondary:
    "border border-zinc-700/60 bg-zinc-800/60 text-zinc-200 hover:bg-zinc-700/60 active:scale-[0.98] transition-transform",
  danger:
    "border border-red-500/20 bg-red-500/10 text-red-400 hover:bg-red-500/20 active:scale-[0.98] transition-transform",
  ghost: "text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-100 active:scale-[0.97] transition-transform",
};

const SIZE_CLASSES: Record<Size, string> = {
  sm: "h-9 rounded-lg px-3 text-sm",
  md: "h-11 rounded-xl px-4 text-sm font-medium",
};

export const Button = ({
  ref,
  className = "",
  variant = "primary",
  size = "md",
  loading = false,
  disabled,
  children,
  ...rest
}: ButtonProps) => (
  <button
    ref={ref}
    disabled={disabled || loading}
    className={`inline-flex items-center justify-center gap-2 disabled:cursor-not-allowed disabled:opacity-60 ${SIZE_CLASSES[size]} ${VARIANT_CLASSES[variant]} ${className}`}
    aria-busy={loading || undefined}
    {...rest}
  >
    {loading ? (
      <span
        className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
        aria-hidden="true"
      />
    ) : null}
    {children}
  </button>
);