import React from 'react';
import { Box, Typography, useTheme } from '@mui/material';
import { useMediaQuery } from '@mui/material';
import MaleIcon from '@mui/icons-material/Male';
import FemaleIcon from '@mui/icons-material/Female';
import PeopleIcon from '@mui/icons-material/People';

interface GenderButtonProps {
  selected: boolean;
  onClick: () => void;
  icon: 'male' | 'female' | 'both';
  label: string;
}

export const GenderButton: React.FC<GenderButtonProps> = ({ selected, onClick, icon, label }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const getIcon = () => {
    switch (icon) {
      case 'male':
        return <MaleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
      case 'female':
        return <FemaleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
      case 'both':
        return <PeopleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
      default:
        return null;
    }
  };

  return (
    <Box
      onClick={onClick}
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        padding: isMobile ? '8px 12px' : '10px 16px',
        borderRadius: '8px',
        cursor: 'pointer',
        bgcolor: selected ? theme.palette.brightPurple.main : 'transparent',
        border: `1px solid ${selected ? theme.palette.brightPurple.main : theme.palette.grey[300]}`,
        '&:hover': {
          bgcolor: selected ? theme.palette.brightPurple.main : theme.palette.grey[100],
        },
      }}
    >
      {getIcon()}
      <Typography
        sx={{
          fontSize: isMobile ? '14px' : '16px',
          fontWeight: 500,
          color: selected ? theme.palette.common.white : theme.palette.text.primary,
        }}
      >
        {label}
      </Typography>
    </Box>
  );
};