import Link from "next/link";
import { ButtonHTMLAttributes, ReactNode } from "react";

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

// Matches the reference's buttons exactly: font-heading (Poppins) 700, 13px,
// 12px radius, 14px/22px padding, no forced uppercase (reference buttons use
// natural case, e.g. "Log In / Open App").
const base =
  "inline-flex items-center justify-center gap-2 rounded-xl px-[22px] py-[14px] text-[13px] font-bold font-display whitespace-nowrap transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:opacity-50 disabled:cursor-not-allowed";

const variants: Record<Variant, string> = {
  primary: "bg-ink text-white hover:bg-neutral-800",
  outline: "bg-transparent text-ink border border-neutral-400 hover:bg-neutral-100",
  gold: "bg-gold-500 text-ink hover:bg-gold-600",
  ghost: "bg-transparent text-ink hover:bg-neutral-100"
};

interface CommonProps {
  variant?: Variant;
  children: ReactNode;
  className?: string;
}

export function ButtonLink({
  href,
  variant = "primary",
  children,
  className = ""
}: CommonProps & { href: string }) {
  return (
    <Link href={href} className={`${base} ${variants[variant]} ${className}`}>
      {children}
    </Link>
  );
}

export function Button({
  variant = "primary",
  children,
  className = "",
  ...rest
}: CommonProps & ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button className={`${base} ${variants[variant]} ${className}`} {...rest}>
      {children}
    </button>
  );
}