import { ButtonHTMLAttributes } from "react";

type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "ghost" | "danger";
  loading?: boolean;
  block?: boolean;
};

export function Button({
  variant = "primary",
  loading,
  block,
  className = "",
  children,
  disabled,
  ...props
}: Props) {
  const base =
    "inline-flex items-center justify-center rounded-xl px-5 py-2.5 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-50";

  const variants = {
    primary:
      "bg-primary text-white shadow-sm hover:brightness-105 active:scale-[0.99]",
    secondary:
      "border border-[var(--border)] bg-white text-foreground hover:bg-slate-50",
    ghost: "text-[var(--muted)] hover:bg-slate-100 hover:text-foreground",
    danger: "bg-red-600 text-white hover:bg-red-700",
  };

  return (
    <button
      className={`${base} ${variants[variant]} ${block ? "w-full" : ""} ${className}`}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? "لطفاً صبر کنید…" : children}
    </button>
  );
}