import { Group } from '@/ui/Group';
import { Icon } from '@/ui/Icon';
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 (
    <Group gap={3}>
      <Group gap={2}>
        <Icon icon={Calendar} size={4} intent="low" />
        <Text size="xs" weight="bold" uppercase letterSpacing="wider" variant="low">Season</Text>
      </Group>
      <Group>
        <Select
          options={options}
          value={selectedSeasonId}
          onChange={(e) => onSeasonChange(e.target.value)}
        />
      </Group>
    </Group>
  );
}