

import { LiveRaceItem } from '@/components/races/LiveRaceItem';
import type { RaceViewData } from '@/lib/view-data/RacesViewData';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';

interface LiveRacesBannerProps {
  liveRaces: RaceViewData[];
  onRaceClick: (raceId: string) => void;
}

export function LiveRacesBanner({ liveRaces, onRaceClick }: LiveRacesBannerProps) {
  if (liveRaces.length === 0) return null;

  return (
    <Stack 
      position="relative" 
      overflow="hidden" 
      rounded="xl" 
      p={6}
      border
      borderColor="border-performance-green/30"
      bg="linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1), transparent)"
    >
      <Stack 
        position="absolute" 
        top="0" 
        right="0" 
        w="32" 
        h="32" 
        bg="bg-performance-green/20" 
        rounded="full" 
        blur="xl" 
      />
      
      <Stack position="relative" zIndex={10}>
        <Stack mb={4}>
          <Stack direction="row" align="center" gap={2} bg="bg-performance-green/20" px={3} py={1} rounded="full" w="fit">
            <Stack w="2" h="2" bg="bg-performance-green" rounded="full" />
            <Text weight="semibold" size="sm" color="text-performance-green">LIVE NOW</Text>
          </Stack>
        </Stack>
        
        <Stack gap={3}>
          {liveRaces.map((race) => (
            <LiveRaceItem
              key={race.id}
              track={race.track}
              leagueName={race.leagueName ?? 'Unknown League'}
              onClick={() => onRaceClick(race.id)}
            />
          ))}
        </Stack>
      </Stack>
    </Stack>
  );
}
