import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

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

const styles: Record<NonNullable<Props["variant"]>, string> = {
  primary:
    "bg-[linear-gradient(135deg,#2663AC_0%,#1d4f8c_100%)] text-white hover:brightness-105 shadow-[0_14px_26px_-10px_rgba(38,99,172,0.55)]",
  secondary:
    "bg-white text-slate-700 border border-slate-300/90 hover:border-[#F7993A] hover:bg-[#fff6eb]",
  ghost: "text-slate-700 hover:bg-slate-100",
  danger: "bg-rose-500/90 text-white hover:bg-rose-400",
};

export function Button({ className, variant = "primary", loading = false, children, disabled, ...props }: Props) {
  return (
    <button
      className={cn(
        "inline-flex h-10 items-center justify-center gap-2 rounded-xl px-4 text-sm font-semibold transition duration-150 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2663AC]/45 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60",
        loading && "pointer-events-none",
        styles[variant],
        className,
      )}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
        <span
          aria-hidden="true"
          className="h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
        />
      ) : null}
      <span>{children}</span>
    </button>
  );
}