import * as React from "react";

/**
 * @startingPoint section="Forms" subtitle="Buttons in every variant & size" viewport="700x330"
 */
export interface ButtonProps {
  children?: React.ReactNode;
  /** Visual role. `primary` is the single accent action; use one per view. */
  variant?: "primary" | "secondary" | "ghost" | "danger";
  size?: "sm" | "md";
  /** Icon element rendered before the label (16px stroke icon). */
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
  disabled?: boolean;
  /** Shows an inline spinner and disables the button. */
  loading?: boolean;
  fullWidth?: boolean;
  type?: "button" | "submit" | "reset";
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  style?: React.CSSProperties;
}

/**
 * Primary action button for ChicoryTV. One `primary` per view; everything else
 * is `secondary`/`ghost`. `danger` for destructive confirmations.
 */
export function Button(props: ButtonProps): JSX.Element;