'use client';

import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Select } from '@/ui/Select';
import { Input } from '@/ui/Input';
import { Icon } from '@/ui/Icon';
import { Search, SlidersHorizontal } from 'lucide-react';
import { Surface } from '@/ui/Surface';
import { SegmentedControl } from '@/ui/SegmentedControl';

interface RacesCommandBarProps {
  timeFilter: string;
  setTimeFilter: (filter: any) => void;
  leagueFilter: string;
  setLeagueFilter: (filter: string) => void;
  leagues: Array<{ id: string; name: string }>;
  onShowMoreFilters: () => void;
}

export function RacesCommandBar({
  timeFilter,
  setTimeFilter,
  leagueFilter,
  setLeagueFilter,
  leagues,
  onShowMoreFilters,
}: RacesCommandBarProps) {
  const leagueOptions = [
    { value: 'all', label: 'All Leagues' },
    ...leagues.map(l => ({ value: l.id, label: l.name }))
  ];

  const timeOptions = [
    { id: 'upcoming', label: 'Upcoming' },
    { id: 'live', label: 'Live' },
    { id: 'past', label: 'Past' },
    { id: 'all', label: 'All' },
  ];

  return (
    <Surface variant="precision" padding="sm">
      <Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={4}>
        <Stack direction="row" align="center" gap={4} wrap>
          <SegmentedControl
            options={timeOptions}
            activeId={timeFilter}
            onChange={(id) => setTimeFilter(id)}
          />

          <Select
            value={leagueFilter}
            onChange={(e) => setLeagueFilter(e.target.value)}
            options={leagueOptions}
          />
        </Stack>

        <Button
          variant="secondary"
          size="sm"
          onClick={onShowMoreFilters}
          icon={<Icon icon={SlidersHorizontal} size={3} />}
        >
          Advanced Filters
        </Button>
      </Stack>
    </Surface>
  );
}