frontPanel/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx

import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, useTheme, Button, useMediaQuery } from "@mui/material";
import CheckboxIcon from "@icons/Checkbox";
import AgeInputWithSelect from "./AgeInputWithSelect";

interface GenderAndAgeSelectorProps {
  gender: string;
  age: string;
  ageError: boolean;
  onGenderChange: (gender: string) => void;
  onAgeChange: (age: string) => void;
  onAgeErrorChange: (error: boolean) => void;
  onStartCreate: () => void;
}

export default function GenderAndAgeSelector({ 
  gender, 
  age, 
  ageError,
  onGenderChange,
  onAgeChange,
  onAgeErrorChange,
  onStartCreate 
}: GenderAndAgeSelectorProps) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(845));

  return (
    <Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
      <Box sx={{ display: "inline-flex", flexWrap: isMobile ? "wrap" : "initial" }}>
        <FormControl component="fieldset" variant="standard">
          <Box sx={{ display: 'flex', alignItems: "end", gap: '4px' }}>
            <FormLabel
              sx={{
                '&.Mui-focused': {
                  color: '#4D4D4D',
                },
                color: '#4D4D4D',
                fontSize: '18px',
                fontWeight: 500,
                lineHeight: 1,
                letterSpacing: 0,
                mr: '3px',
              }}
              component="legend">Пол</FormLabel>
          </Box>
          <RadioGroup
            sx={{
              width: "155px",
              justifyContent: "space-between",
              mt: "20px",
              ml: "-9px"
            }}
            row
            aria-label="gender"
            name="row-radio-buttons-group"
            value={gender}
            onChange={(e) => onGenderChange(e.target.value)}
          >
            <FormControlLabel
              sx={{
                padding: 0,
                '& .MuiTouchRipple-root': {
                  width: '100%',
                  height: '100%',
                  overflow: 'visible',
                },
                '& .MuiSvgIcon-root': {
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  transform: 'translate(-50%, -50%)',
                },
                '& .MuiFormControlLabel-label': {
                  fontSize: '18px',
                  fontWeight: 400,
                  fontFamily: 'Rubik',
                  lineHeight: 1,
                  letterSpacing: 0,
                  color: '#4D4D4D',
                  ml: "6px"
                },
                m: 0,
              }}
              value="male"
              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
              label="М"
            />
            <FormControlLabel
              sx={{
                padding: 0,
                '& .MuiTouchRipple-root': {
                  width: '100%',
                  height: '100%',
                  overflow: 'visible',
                },
                '& .MuiSvgIcon-root': {
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  transform: 'translate(-50%, -50%)',
                },
                '& .MuiFormControlLabel-label': {
                  fontSize: '18px',
                  fontWeight: 400,
                  fontFamily: 'Rubik',
                  lineHeight: 1,
                  letterSpacing: 0,
                  color: '#4D4D4D',
                },
                m: 0,
              }}
              value="female"
              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
              label="Ж"
            />
          </RadioGroup>
        </FormControl>

        <FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px", minWidth: "265px" }} variant="filled">
          <Box sx={{
            display: 'flex',
            alignItems: 'end',
            gap: '4px'
          }}>
            <FormLabel sx={{
              color: '#4D4D4D',
              fontSize: "18px",
              fontWeight: 500,
              lineHeight: "100%",
              '&.Mui-focused': {
                color: '#4D4D4D',
              },
            }}>Возраст</FormLabel>
          </Box>
          <AgeInputWithSelect value={age} onChange={onAgeChange} onErrorChange={onAgeErrorChange} />
        </FormControl>
      </Box>

      <Button
        onClick={onStartCreate}
        variant="contained"
        disabled={!gender || !age || ageError}
        sx={{
          bgcolor: theme.palette.brightPurple.main,
          borderRadius: "8px",
          width: "130px",
          height: "48px",
          boxShadow: "none",
          textTransform: "none",
          fontSize: "18px",
          '&:hover': { bgcolor: theme.palette.brightPurple.main },
        }}
      >
        Ок
      </Button>
    </Box>
  );
}