import { RaceResultList } from '@/components/races/RaceResultList';
import { RaceSummaryItem } from '@/components/races/RaceSummaryItem';
import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';

type RaceWithResults = {
  raceId: string;
  track: string;
  car: string;
  winnerName: string;
  formattedDate: string;
};

interface LatestResultsSidebarProps {
  results: RaceWithResults[];
}

export function LatestResultsSidebar({ results }: LatestResultsSidebarProps) {
  if (!results.length) {
    return null;
  }

  return (
    <Card bg="bg-iron-gray/80" p={4}>
      <Heading level={3} mb={3}>
        Latest results
      </Heading>
      <RaceResultList>
        {results.slice(0, 4).map((result) => {
          return (
            <Box as="li" key={result.raceId}>
              <RaceSummaryItem
                track={result.track}
                meta={`${result.winnerName} • ${result.car}`}
                dateLabel={result.formattedDate}
              />
            </Box>
          );
        })}
      </RaceResultList>
    </Card>
  );
}