// components/ui/Button.tsx
// Token-styled, accessible button. Server-safe (no client hooks).
//
// Variants:
//   primary   — brand red CTA (the signature "Dona" / "Participa" button)
//   secondary — white with red text, for use on busy/red backgrounds
//   ghost     — transparent, red text, no background
// All variants meet the 44px minimum tap target (WCAG 2.1 AA).

import * as React from "react";

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

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  /** Render full-width (block). */
  block?: boolean;
}

const base =
  "inline-flex items-center justify-center font-body font-bold rounded-xl " +
  "transition-[background-color,box-shadow,opacity] duration-200 " +
  "min-h-[44px] cursor-pointer select-none " +
  "focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 " +
  "focus-visible:outline-steelblue " +
  "disabled:opacity-50 disabled:cursor-not-allowed";

const variants: Record<Variant, string> = {
  primary:
    "bg-primary text-on-primary hover:bg-primary-soft active:bg-primary",
  secondary:
    "bg-canvas text-primary border-2 border-primary hover:bg-primary hover:text-on-primary",
  ghost: "bg-transparent text-primary hover:bg-primary/10",
};

const sizes: Record<Size, string> = {
  md: "text-button px-6 py-2.5", // 24px x 10px padding, 18px/700 label
  lg: "text-button px-7 py-3.5",
};

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  function Button(
    { variant = "primary", size = "md", block = false, className = "", type, ...rest },
    ref,
  ) {
    const cls = [
      base,
      variants[variant],
      sizes[size],
      block ? "w-full" : "",
      className,
    ]
      .filter(Boolean)
      .join(" ");
    return (
      <button ref={ref} type={type ?? "button"} className={cls} {...rest} />
    );
  },
);