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

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

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  children: ReactNode;
}

const variantClasses: Record<Variant, string> = {
  primary:
    "neon-cta font-label text-[12px] uppercase tracking-[0.2em] rounded-md px-5 py-2.5 transition-opacity hover:opacity-90 active:scale-95",
  secondary:
    "bg-surface-container-high text-primary font-label text-[12px] uppercase tracking-[0.2em] rounded-md px-5 py-2.5 transition-colors hover:bg-surface-container-highest active:scale-95",
  ghost:
    "bg-transparent text-on-surface font-label text-[12px] uppercase tracking-[0.2em] rounded-md px-5 py-2.5 border border-outline-variant/20 transition-colors hover:border-outline-variant/40 active:scale-95",
};

export function Button({ variant = "primary", className = "", children, ...props }: ButtonProps) {
  return (
    <button
      className={`inline-flex items-center justify-center transition-transform ${variantClasses[variant]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
}
