import React from 'react';
import { Box, Typography, useTheme } from '@mui/material';
import { useMediaQuery } from '@mui/material';
import { InfoPopover } from './InfoPopover';
import { GenderButton } from './GenderButton';

interface GenderSelectorProps {
  value: string[];
  onChange: (value: string[]) => void;
}

export const GenderSelector: React.FC<GenderSelectorProps> = ({ value, onChange }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const handleGenderClick = (gender: string) => {
    if (value.includes(gender)) {
      onChange(value.filter(g => g !== gender));
    } else {
      onChange([...value, gender]);
    }
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <Typography
          sx={{
            fontSize: isMobile ? '14px' : '16px',
            fontWeight: 500,
            color: theme.palette.text.primary,
          }}
        >
          Пол
        </Typography>
        <InfoPopover />
      </Box>
      <Box sx={{ display: 'flex', gap: '8px' }}>
        <GenderButton
          selected={value.includes('male')}
          onClick={() => handleGenderClick('male')}
          icon="male"
          label="Мужской"
        />
        <GenderButton
          selected={value.includes('female')}
          onClick={() => handleGenderClick('female')}
          icon="female"
          label="Женский"
        />
      </Box>
    </Box>
  );
}; 