import React from 'react';
import MuiCheckbox from '@mui/material/Checkbox';
import type { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';

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

/** Props for the FA Checkbox component */
export type CheckboxProps = MuiCheckboxProps;

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

/**
 * Checkbox for the FA design system.
 *
 * Multi-select control for independent boolean options. Wraps MUI Checkbox
 * with FA brand tokens — warm gold fill when checked, rounded square shape.
 *
 * Usage:
 * - For independent booleans ("I agree to terms", "Include catering")
 * - For mutually exclusive options, use Radio instead
 * - For binary toggles, use Switch instead
 *
 * **Accessibility**: Always wrap in `FormControlLabel` with a `label` prop.
 * A standalone Checkbox without a visible label is inaccessible — screen
 * readers cannot announce what the checkbox controls.
 * ```tsx
 * <FormControlLabel control={<Checkbox />} label="I agree to the terms" />
 * ```
 */
export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>((props, ref) => {
  return <MuiCheckbox ref={ref} {...props} />;
});

Checkbox.displayName = 'Checkbox';
export default Checkbox;
