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

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

export function Button({
  href,
  variant = "primary",
  size = "md",
  className,
  children,
  type = "button",
  disabled = false,
  onClick,
}: ButtonProps) {
  const content = (
    <span className="inline-flex items-center justify-center whitespace-nowrap font-bold tracking-[-0.02em] [font-family:inherit]">
      {children}
    </span>
  );

  const classes = cn(
    "inline-flex items-center justify-center rounded-control transition-colors disabled:cursor-not-allowed disabled:opacity-60 [font-family:inherit]",
    size === "sm" ? "h-9 px-4 text-sm" : "",
    size === "md" ? "h-12 px-6 text-base" : "",
    size === "lg" ? "h-12 px-6 text-base" : "",
    variant === "primary"
      ? "bg-accent !text-white hover:bg-accent-strong"
      : "",
    variant === "secondary"
      ? "border-2 border-line bg-transparent text-primary hover:bg-muted-surface"
      : "",
    variant === "ghost"
      ? "bg-transparent text-primary hover:bg-primary/5"
      : "",
    className,
  );

  if (href) {
    if (disabled) {
      return (
        <span
          aria-disabled="true"
          className={cn(classes, "pointer-events-none cursor-not-allowed opacity-60")}
        >
          {content}
        </span>
      );
    }

    return (
      <Link href={href} className={classes} onClick={onClick}>
        {content}
      </Link>
    );
  }

  return (
    <button
      type={type}
      className={cn(classes, "appearance-none")}
      disabled={disabled}
      onClick={onClick}
    >
      {content}
    </button>
  );
}