"use client";

import { cn } from "@/lib/cn";
import type { ButtonHTMLAttributes } from "react";

type Variant = "primary" | "secondary" | "ghost" | "outline";

const variants: Record<Variant, string> = {
  primary:
    "bg-[var(--gold)] text-[var(--navy)] font-medium shadow-sm hover:brightness-105 active:scale-[0.99]",
  secondary:
    "bg-[var(--navy)] text-white hover:bg-[#152a45] shadow-sm active:scale-[0.99]",
  ghost: "text-[var(--navy)] hover:bg-white/60",
  outline:
    "border border-white/40 text-white hover:bg-white/10 backdrop-blur-sm",
};

export function Button({
  className,
  variant = "primary",
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: Variant }) {
  return (
    <button
      className={cn(
        "inline-flex items-center justify-center gap-2 rounded-full px-6 py-2.5 text-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none",
        variants[variant],
        className
      )}
      {...props}
    />
  );
}