import type { ButtonHTMLAttributes, ReactNode } from "react";

type Variant = "primary" | "ghost" | "danger";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  /** Compact 28px height for table-row actions and tight toolbars. */
  size?: "sm" | "md";
  /** Stretch to fill the container width (e.g. login submit). */
  block?: boolean;
  /** Show a spinner and disable while an async action is in flight. */
  loading?: boolean;
  children: ReactNode;
}

/**
 * The one button. Variants map to the design language:
 *  - primary: accent-solid, the single high-signal action per surface
 *  - ghost: bordered, secondary
 *  - danger: destructive (delete machine, revoke key)
 */
export function Button({
  variant = "ghost",
  size = "md",
  block = false,
  loading = false,
  disabled,
  className,
  children,
  ...rest
}: ButtonProps) {
  const classes = [
    "btn",
    `btn--${variant}`,
    size === "sm" && "btn--sm",
    block && "btn--block",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <button
      className={classes}
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      {...rest}
    >
      {loading && <span className="btn__spin" aria-hidden="true" />}
      {children}
    </button>
  );
}
