import { Link } from "react-router-dom";
import { cn } from "../utils/cn.ts";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  to?: string;
  variant?: "default" | "primary" | "link" | "danger";
  size?: "sm" | "md" | "lg";
}

export function Button({ children, to, type = "button", variant = "default", size = "md", className, ...props }: ButtonProps) {
  const sizeClasses = {
    sm: "px-3 py-1.5 text-xs",
    md: "px-4 py-2 text-sm",
    lg: "px-6 py-3 text-base",
  };

  const variantClasses =
    variant === "primary"
      ? "text-zinc-300 bg-zinc-800 hover:bg-zinc-700 rounded"
      : variant === "link"
      ? "text-zinc-500 hover:text-zinc-300 px-2 py-1"
      : variant === "danger"
      ? "bg-red-900 text-red-100 border border-red-800 hover:bg-red-800 hover:border-red-700 rounded"
      : "text-zinc-400 border border-zinc-800 hover:border-zinc-700 hover:text-zinc-300 rounded";

  const baseClassName = cn(
    sizeClasses[size],
    variantClasses,
    "transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
  );

  if (to) {
    return (
      <Link to={to} className={cn(baseClassName, className)}>
        {children}
      </Link>
    );
  }

  return (
    <button type={type} className={cn(baseClassName, className)} {...props}>
      {children}
    </button>
  );
}