import { LoaderCircle } from "lucide-react";
import { cn } from "../lib/cn";

export function Button({
  className,
  variant = "primary",
  size = "md",
  loading,
  icon,
  children,
  disabled,
  ...props
}) {
  return (
    <button
      className={cn(
        "inline-flex items-center justify-center gap-2 rounded-md font-semibold transition duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-55",
        {
          "bg-primary text-white hover:bg-primary-strong": variant === "primary",
          "bg-accent text-white hover:bg-accent-dark": variant === "accent",
          "border border-line bg-surface text-ink hover:border-primary hover:text-primary":
            variant === "secondary",
          "text-ink hover:bg-paper": variant === "ghost",
          "bg-danger text-white hover:bg-danger/90": variant === "danger",
          "h-9 px-3 text-sm": size === "sm",
          "h-11 px-5 text-sm": size === "md",
          "h-13 px-6 text-base": size === "lg",
        },
        className,
      )}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? <LoaderCircle className="size-4 animate-spin" /> : icon}
      {children}
    </button>
  );
}
