'use client';
import { FunctionComponent } from 'react';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import type { Gender } from '@/services/patients/types';

export interface GenderToggleProps {
  /** Current selection; `null` means nothing chosen yet (gender is never defaulted). */
  value: Gender | null;
  /** Fires only with a concrete gender — deselecting is ignored so the field stays required. */
  onChange: (value: Gender) => void;
  maleLabel: string;
  femaleLabel: string;
  /** Marks the group invalid (e.g. submitted without a choice). */
  error?: boolean;
  disabled?: boolean;
  ariaLabel?: string;
}

/**
 * Required male/female toggle. Gender is **load-bearing** for same-gender caregiver matching
 * (search/booking), so it is never defaulted and cannot be deselected back to empty via the UI.
 * Labels are translated by the caller (labels are i18n keys off the code).
 * @component GenderToggle
 */
const GenderToggle: FunctionComponent<GenderToggleProps> = ({
  value,
  onChange,
  maleLabel,
  femaleLabel,
  error = false,
  disabled = false,
  ariaLabel,
}) => (
  <ToggleButtonGroup
    exclusive
    value={value}
    disabled={disabled}
    aria-label={ariaLabel}
    onChange={(_event, next: Gender | null) => {
      if (next) onChange(next);
    }}
    sx={{
      '& .MuiToggleButton-root': {
        flex: 1,
        py: 1.25,
        fontWeight: 700,
        borderColor: error ? 'var(--bal-error)' : undefined,
      },
    }}
  >
    <ToggleButton value="male" data-gender="male">
      {maleLabel}
    </ToggleButton>
    <ToggleButton value="female" data-gender="female">
      {femaleLabel}
    </ToggleButton>
  </ToggleButtonGroup>
);

export default GenderToggle;
