import { RaceSummaryItem } from '@/components/races/RaceSummaryItem';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';

type UpcomingRace = {
  id: string;
  track: string;
  car: string;
  formattedDate: string;
};

interface UpcomingRacesSidebarProps {
  races: UpcomingRace[];
}

export function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
  if (!races.length) {
    return null;
  }

  return (
    <Card bg="bg-iron-gray/80" p={4}>
      <Stack direction="row" align="baseline" justify="between" mb={3}>
        <Heading level={3}>Upcoming races</Heading>
        <Button
          as="a"
          href="/races"
          variant="secondary"
          size="sm"
        >
          View all
        </Button>
      </Stack>
      <Stack gap={3}>
        {races.slice(0, 4).map((race) => {
          return (
            <RaceSummaryItem
              key={race.id}
              track={race.track}
              meta={race.car}
              dateLabel={race.formattedDate}
            />
          );
        })}
      </Stack>
    </Card>
  );
}