"use client";

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

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

/** Exported so a <Link> can be styled as a button without nesting one inside
 *  an anchor, which is invalid markup and confuses assistive tech. */
export const buttonBase =
  "inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3.5 " +
  "text-sm font-medium tracking-tight transition-all duration-300 " +
  "disabled:cursor-not-allowed disabled:opacity-50 " +
  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500";

const base = buttonBase;

export const buttonVariants: Record<Variant, string> = {
  primary:
    "bg-zinc-950 text-white hover:bg-zinc-800 hover:-translate-y-0.5 " +
    "shadow-[0_8px_20px_-6px_rgba(0,0,0,0.35)]",
  secondary:
    "bg-white text-zinc-900 border border-zinc-200 hover:-translate-y-0.5 " +
    "shadow-[var(--pill-shadow)]",
  accent:
    "bg-gradient-to-r from-amber-500 to-orange-600 text-white " +
    "hover:-translate-y-0.5 shadow-[0_8px_24px_-6px_rgba(234,88,12,0.5)]",
};

export default function Button({
  children,
  variant = "primary",
  className = "",
  ...props
}: {
  children: ReactNode;
  variant?: Variant;
} & ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button className={`${base} ${buttonVariants[variant]} ${className}`} {...props}>
      {children}
    </button>
  );
}