'use client';

import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
import { routes } from '@/lib/routing/RouteConfig';
import { Heading } from '@/ui/Heading';
import { Link } from '@/ui/Link';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';

interface Race {
  id: string;
  track: string;
  car: string;
  formattedDate: string;
}

interface RecentRacesPanelProps {
  races: Race[];
}

/**
 * RecentRacesPanel - Semantic section for upcoming/recent races.
 */
export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
  return (
    <Panel variant="dark" padding={6}>
      <Stack direction="row" align="center" justify="between" mb={6}>
        <Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
          UPCOMING RACES
        </Heading>
        <Link 
          href={routes.public.races}
          size="xs"
          weight="bold"
          letterSpacing="widest"
          variant="primary"
          hoverColor="text-white"
          transition
        >
          FULL SCHEDULE →
        </Link>
      </Stack>

      <Stack gap={3}>
        {races.length === 0 ? (
          <Panel variant="muted" padding={12} border>
            <Stack center>
              <Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
                No races scheduled
              </Text>
            </Stack>
          </Panel>
        ) : (
          races.slice(0, 3).map((race) => (
            <UpcomingRaceItem
              key={race.id}
              track={race.track}
              car={race.car}
              formattedDate={race.formattedDate}
              formattedTime="20:00 GMT"
              isMyLeague={false}
            />
          ))
        )}
      </Stack>
    </Panel>
  );
}