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

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "outline" | "ghost";
  size?: "default" | "sm" | "lg";
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "default", size = "default", ...props }, ref) => {
    const variants: Record<string, string> = {
      default:
        "bg-gold hover:bg-gold-dark text-white shadow-sm",
      outline:
        "border-2 border-ink text-ink hover:bg-ink hover:text-white",
      ghost:
        "text-ink hover:text-gold hover:bg-gold/5",
    };

    const sizes: Record<string, string> = {
      default: "px-8 py-3.5 text-xs",
      sm: "px-5 py-2.5 text-xs",
      lg: "px-10 py-4 text-sm",
    };

    return (
      <button
        className={cn(
          "inline-flex items-center justify-center gap-2 rounded font-bold tracking-widest transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold/50 disabled:pointer-events-none disabled:opacity-50",
          variants[variant],
          sizes[size],
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

/* Link-styled button — renders as <a> with button styling */
interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  variant?: "default" | "outline" | "ghost";
  size?: "default" | "sm" | "lg";
}

const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
  ({ className, variant = "default", size = "default", ...props }, ref) => {
    const variants: Record<string, string> = {
      default:
        "bg-gold hover:bg-gold-dark text-white shadow-sm",
      outline:
        "border-2 border-ink text-ink hover:bg-ink hover:text-white",
      ghost:
        "text-ink hover:text-gold hover:bg-gold/5",
    };

    const sizes: Record<string, string> = {
      default: "px-8 py-3.5 text-xs",
      sm: "px-5 py-2.5 text-xs",
      lg: "px-10 py-4 text-sm",
    };

    return (
      <a
        className={cn(
          "inline-flex items-center justify-center gap-2 rounded font-bold tracking-widest transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold/50",
          variants[variant],
          sizes[size],
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);
ButtonLink.displayName = "ButtonLink";

export { Button, ButtonLink };