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

type Variant = "primary" | "secondary" | "outline" | "ghost" | "danger";
type Size = "sm" | "md" | "lg";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
}

const VARIANTS: Record<Variant, string> = {
  primary: "bg-brand-500 hover:bg-brand-600 text-white shadow-sm hover:shadow-md active:shadow-sm",
  secondary: "bg-slate-900 hover:bg-slate-800 text-white shadow-sm",
  outline: "border border-slate-300 hover:border-slate-400 hover:bg-slate-50 text-slate-700",
  ghost: "hover:bg-slate-100 text-slate-600",
  danger: "bg-red-600 hover:bg-red-700 text-white shadow-sm",
};

const SIZES: Record<Size, string> = {
  sm: "px-3 py-1.5 text-xs rounded-md gap-1.5",
  md: "px-4 py-2 text-sm rounded-lg gap-2",
  lg: "px-6 py-2.5 text-base rounded-lg gap-2",
};

export const Button = forwardRef<HTMLButtonElement, Props>(
  ({ variant = "primary", size = "md", className, children, disabled, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(
        "inline-flex items-center justify-center font-semibold transition-all duration-150 active:scale-[0.98]",
        VARIANTS[variant],
        SIZES[size],
        disabled && "opacity-50 cursor-not-allowed pointer-events-none",
        className,
      )}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  ),
);
Button.displayName = "Button";
