import { Card } from '@/ui/Card';
import { Grid } from '@/ui/Grid';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { StatGridItem } from '@/ui/StatGridItem';
import { Flag } from 'lucide-react';

interface RaceDetailCardProps {
  track: string;
  car: string;
  sessionType: string;
  statusLabel: string;
  statusColor: string;
}

export function RaceDetailCard({ track, car, sessionType, statusLabel, statusColor }: RaceDetailCardProps) {
  return (
    <Card>
      <Stack gap={4}>
        <Heading level={2} icon={<Icon icon={Flag} size={5} color="text-primary-blue" />}>Race Details</Heading>
        <Grid cols={2} gap={4}>
          <StatGridItem label="Track" value={track} />
          <StatGridItem label="Car" value={car} />
          <StatGridItem label="Session Type" value={sessionType} />
          <StatGridItem label="Status" value={statusLabel} color={statusColor} />
        </Grid>
      </Stack>
    </Card>
  );
}