'use client';

import React from 'react';
import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Link } from '@/ui/Link';
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 (
    <Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
      <Box display="flex" alignItems="center" justifyContent="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>
      </Box>

      <Box display="flex" flexDirection="col" gap={3}>
        {races.length === 0 ? (
          <Box py={12} border borderStyle="dashed" borderColor="border-gray/30" bg="graphite-black/50" display="flex" alignItems="center" justifyContent="center">
            <Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
              No races scheduled
            </Text>
          </Box>
        ) : (
          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}
            />
          ))
        )}
      </Box>
    </Box>
  );
}
