import { clsx } from "clsx";
import Link from "next/link";

type Variant = "primary" | "secondary" | "ghost" | "on-blue";
type Props = {
  variant?: Variant;
  href?: string;
  children: React.ReactNode;
  className?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

const base =
  "inline-flex items-center justify-center gap-2 rounded-lg font-semibold tracking-tight transition-all duration-200 ease-out px-6 py-3 text-[15px] will-change-transform hover:scale-[1.02] active:scale-[0.98] motion-reduce:transform-none motion-reduce:transition-none";

const variants: Record<Variant, string> = {
  primary:
    "bg-[var(--color-blue)] text-white hover:bg-[var(--color-blue-deep)] shadow-sm hover:shadow-md",
  secondary:
    "bg-[var(--color-mist)] text-[var(--color-blue)] hover:bg-[#dde3ff]",
  ghost:
    "bg-transparent text-[var(--color-ink)] border border-[var(--color-line)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]",
  "on-blue":
    "bg-white text-[var(--color-blue)] hover:bg-[var(--color-mist)] shadow-sm hover:shadow-md",
};

export function Button({ variant = "primary", href, children, className, ...rest }: Props) {
  const classes = clsx(base, variants[variant], className);
  if (href) {
    return (
      <Link href={href} className={classes}>
        {children}
      </Link>
    );
  }
  return (
    <button className={classes} {...rest}>
      {children}
    </button>
  );
}
