import Link from "next/link";
import { cn } from "@/lib/utils";

type Variant = "brand" | "solid" | "outline" | "ghost";
type Size = "sm" | "md" | "lg";

const base =
  "inline-flex items-center justify-center gap-2 rounded-pill font-medium leading-none " +
  "transition-[background-color,border-color,color,transform] duration-fast ease-brand " +
  "active:scale-[0.98] focus-visible:outline-none " +
  "focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 " +
  "focus-visible:ring-offset-paper disabled:opacity-50 disabled:pointer-events-none";

const variants: Record<Variant, string> = {
  // Primary CTA — the violet signal; darkens to accent-deep on hover (no glow).
  brand: "bg-brand text-brand-fg hover:bg-brand-deep",
  // High-contrast on dark surfaces.
  solid: "bg-ink text-paper hover:bg-ink/90",
  // 1px current-color border — adapts to dark (white) and light (ink) surfaces.
  outline: "border border-current/30 bg-transparent hover:border-current",
  ghost: "bg-transparent hover:bg-current/10",
};

const sizes: Record<Size, string> = {
  sm: "h-9 px-4 text-sm",
  md: "h-11 px-6 text-sm",
  lg: "h-12 px-8 text-base",
};

export type ButtonProps = {
  variant?: Variant;
  size?: Size;
  href?: string;
  className?: string;
  children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export function Button({
  variant = "brand",
  size = "md",
  href,
  className,
  children,
  ...props
}: ButtonProps) {
  const classes = cn(base, variants[variant], sizes[size], className);
  if (href) {
    const external = /^https?:\/\//.test(href);
    return (
      <Link
        href={href}
        className={classes}
        {...(external ? { target: "_blank", rel: "noreferrer" } : {})}
      >
        {children}
      </Link>
    );
  }
  return (
    <button className={classes} {...props}>
      {children}
    </button>
  );
}