import type { ButtonHTMLAttributes } from "react";

export type ButtonVariant = "primary" | "outline" | "quiet";

const variantClasses: Record<ButtonVariant, string> = {
  primary:
    "border-2 border-marquee bg-marquee/10 text-marquee shadow-[0_0_24px_rgba(255,122,41,0.35)] hover:bg-marquee/20",
  outline: "border-2 border-chrome/50 text-paper hover:border-arc hover:text-arc",
  quiet: "border border-transparent text-chrome hover:text-paper",
};

export function buttonClassName(variant: ButtonVariant = "primary", className = ""): string {
  return `inline-block rounded-full px-6 py-3 font-display text-lg tracking-wide transition ${variantClasses[variant]} ${className}`;
}

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
}

export default function Button({ variant = "primary", className = "", ...props }: ButtonProps) {
  return <button className={buttonClassName(variant, className)} {...props} />;
}