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

type ButtonProps = {
  children: React.ReactNode;
  className?: string;
  href?: string;
  variant?: "primary" | "secondary" | "ghost";
  type?: "button" | "submit";
  onClick?: () => void;
  disabled?: boolean;
};

/** Primary interactive button / link used across the storefront. */
export function Button({
  children,
  className,
  href,
  variant = "primary",
  type = "button",
  onClick,
  disabled,
}: ButtonProps) {
  const styles = cn(
    "inline-flex h-10 items-center justify-center px-5 text-[11px] font-medium uppercase tracking-[0.16em] transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50",
    variant === "primary" &&
      "bg-foreground text-background hover:bg-[var(--accent)] hover:text-white",
    variant === "secondary" &&
      "border border-border bg-transparent text-foreground hover:border-foreground",
    variant === "ghost" && "text-foreground hover:text-[var(--accent)]",
    className,
  );

  if (href) {
    return (
      <Link href={href} className={styles}>
        {children}
      </Link>
    );
  }

  return (
    <button type={type} onClick={onClick} disabled={disabled} className={styles}>
      {children}
    </button>
  );
}