'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 { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

import { CardStack } from '@/ui/CardStack';

import { Center } from '@/ui/Center';

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) {
  const actions = (
    <Link 
      href={routes.public.races}
      size="xs"
      weight="bold"
      letterSpacing="widest"
      variant="primary"
    >
      FULL SCHEDULE →
    </Link>
  );

  return (
    <Panel 
      variant="dark" 
      padding={6} 
      title="UPCOMING RACES"
      actions={actions}
    >
      <CardStack gap={3}>
        {races.length === 0 ? (
          <Panel variant="muted" padding={12} border>
            <Center>
              <Text size="xs" font="mono" uppercase letterSpacing="widest" variant="low">
                No races scheduled
              </Text>
            </Center>
          </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}
            />
          ))
        )}
      </CardStack>
    </Panel>
  );
}