import {
  TextField,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  Box,
  type SelectChangeEvent,
} from '@mui/material';
import { useTranslation } from 'react-i18next';

interface PersonalInfoFieldsProps {
  sex: string;
  setSex: (sex: string) => void;
}

export function PersonalInfoFields({ sex, setSex }: PersonalInfoFieldsProps) {
  const { t } = useTranslation('completionForm');

  const handleChange = (e: SelectChangeEvent) => {
    setSex(e.target.value);
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
      <Box sx={{ display: 'flex', gap: 2 }}>
        <TextField
          label={t('completion.name')}
          placeholder={t('completion.name')}
          variant="outlined"
          sx={{
            width: '309px',
          }}
        />
        <TextField
          label={t('completion.familyName')}
          placeholder={t('completion.familyName')}
          variant="outlined"
          sx={{
            width: '309px',
          }}
        />
      </Box>

      <Box sx={{ display: 'flex', gap: 2 }}>
        <FormControl sx={{ width: '309px' }}>
          <InputLabel id="sex-label">{t('completion.gender')}</InputLabel>
          <Select
            labelId="sex-label"
            id="sex"
            value={sex}
            label={t('completion.gender')}
            onChange={handleChange}
          >
            <MenuItem value="female">{t('completion.man')}</MenuItem>
            <MenuItem value="male">{t('completion.woman')}</MenuItem>
          </Select>
        </FormControl>

        <TextField
          label={t('completion.optionalNationalCode')}
          placeholder={t('completion.optionalNationalCode')}
          variant="outlined"
          sx={{
            width: '309px',
          }}
        />
      </Box>
    </Box>
  );
}