import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
import { UpcomingRacesList } from '@/components/races/UpcomingRacesList';
import { MinimalEmptyState } from '@/ui/EmptyState';
import { routes } from '@/lib/routing/RouteConfig';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Calendar } from 'lucide-react';

interface UpcomingRace {
  id: string;
  track: string;
  car: string;
  formattedDate: string;
  formattedTime: string;
  isMyLeague: boolean;
}

interface UpcomingRacesProps {
  races: UpcomingRace[];
  hasRaces: boolean;
}

export function UpcomingRaces({ races, hasRaces }: UpcomingRacesProps) {
  return (
    <Card>
      <Stack direction="row" align="center" justify="between" mb={4}>
        <Heading level={3} icon={<Icon icon={Calendar} size={5} color="var(--primary-blue)" />}>
          Upcoming Races
        </Heading>
        <Link href={routes.public.races} variant="primary">
          <Text size="xs">View all</Text>
        </Link>
      </Stack>
      {hasRaces ? (
        <UpcomingRacesList>
          {races.slice(0, 5).map((race) => (
            <UpcomingRaceItem
              key={race.id}
              track={race.track}
              car={race.car}
              formattedDate={race.formattedDate}
              formattedTime={race.formattedTime}
              isMyLeague={race.isMyLeague}
            />
          ))}
        </UpcomingRacesList>
      ) : (
        <MinimalEmptyState
          icon={Calendar}
          title="No upcoming races"
          description="Check back later for new events"
        />
      )}
    </Card>
  );
}