import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/primitives/Box';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { Calendar } from 'lucide-react';

interface Season {
  id: string;
  name: string;
  isActive?: boolean;
}

interface SeasonSelectorProps {
  seasons: Season[];
  selectedSeasonId: string;
  onSeasonChange: (id: string) => void;
}

export function SeasonSelector({ seasons, selectedSeasonId, onSeasonChange }: SeasonSelectorProps) {
  const options = seasons.map(season => ({
    value: season.id,
    label: `${season.name}${season.isActive ? ' (Active)' : ''}`
  }));

  return (
    <Box display="flex" alignItems="center" gap={3}>
      <Box display="flex" alignItems="center" gap={2} color="text-gray-500">
        <Icon icon={Calendar} size={4} />
        <Text size="xs" weight="bold" uppercase letterSpacing="wider">Season</Text>
      </Box>
      <Box width="48">
        <Select
          options={options}
          value={selectedSeasonId}
          onChange={(e) => onSeasonChange(e.target.value)}
          fullWidth={true}
        />
      </Box>
    </Box>
  );
}
