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

export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "ghost" | "danger";
  size?: "sm" | "md" | "icon";
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "primary", size = "md", type = "button", ...props }, ref) => (
    <button
      ref={ref}
      type={type}
      className={cn(
        "inline-flex max-w-full min-w-0 items-center justify-center gap-2 rounded-md text-center font-semibold leading-6 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus)] disabled:pointer-events-none disabled:opacity-55",
        {
          "bg-[var(--primary)] text-white hover:bg-[var(--primary-strong)]": variant === "primary",
          "border border-[var(--border)] bg-white text-[var(--ink)] hover:bg-[var(--surface-muted)]":
            variant === "secondary",
          "text-[var(--ink-soft)] hover:bg-[var(--surface-muted)] hover:text-[var(--ink)]": variant === "ghost",
          "bg-[var(--danger)] text-white hover:bg-[#8f2f30]": variant === "danger",
          "min-h-9 px-3 py-1.5 text-sm": size === "sm",
          "min-h-11 px-4 py-2 text-sm": size === "md",
          "size-11 shrink-0 p-0": size === "icon"
        },
        className
      )}
      {...props}
    />
  )
);

Button.displayName = "Button";
