import React from 'react';
import MuiRadio from '@mui/material/Radio';
import type { RadioProps as MuiRadioProps } from '@mui/material/Radio';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Props for the FA Radio component */
export type RadioProps = MuiRadioProps;

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Radio button for the FA design system.
 *
 * Single-select control for mutually exclusive options. Wraps MUI Radio
 * with FA brand tokens — warm gold fill when selected.
 *
 * From Parsons 1.0 Figma radio component — 16px circle with brand dot.
 *
 * Usage:
 * - For binary on/off, use Switch instead
 * - For multi-select, use Checkbox (planned) or Chip
 *
 * **Accessibility**: Always use inside a `RadioGroup` and wrap each Radio
 * in `FormControlLabel`. A standalone Radio without a label or group is
 * inaccessible — screen readers cannot announce the option or allow
 * keyboard arrow-key navigation between options.
 * ```tsx
 * <RadioGroup value={value} onChange={handleChange}>
 *   <FormControlLabel value="burial" control={<Radio />} label="Burial" />
 *   <FormControlLabel value="cremation" control={<Radio />} label="Cremation" />
 * </RadioGroup>
 * ```
 */
export const Radio = React.forwardRef<HTMLButtonElement, RadioProps>((props, ref) => {
  return <MuiRadio ref={ref} {...props} />;
});

Radio.displayName = 'Radio';
export default Radio;
