'use client';

import type { TimeFilter } from '@/templates/RacesTemplate';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { FilterGroup } from '@/ui/FilterGroup';
import { Select } from '@/ui/Select';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { SlidersHorizontal } from 'lucide-react';

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

export function RaceFilterBar({
  timeFilter,
  setTimeFilter,
  leagueFilter,
  setLeagueFilter,
  leagues,
  onShowMoreFilters,
}: RaceFilterBarProps) {
  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 (
    <Card variant="precision" padding="sm">
      <Stack direction="row" align="center" justify="between" wrap gap={4}>
        <Stack direction="row" align="center" gap={4} wrap>
          <FilterGroup
            options={timeOptions}
            activeId={timeFilter}
            onSelect={(id) => setTimeFilter(id as TimeFilter)}
          />

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

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