import { Box } from '@/ui/Box';
import { LiveRaceItem } from '@/components/races/LiveRaceItem';
import { Text } from '@/ui/Text';

interface LiveRaceBannerProps {
  liveRaces: Array<{
    id: string;
    track: string;
    leagueName: string;
  }>;
  onRaceClick?: (raceId: string) => void;
}

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

  return (
    <Box 
      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)"
    >
      <Box 
        position="absolute" 
        top="0" 
        right="0" 
        w="32" 
        h="32" 
        bg="bg-performance-green/20" 
        rounded="full" 
        blur="xl" 
        animate="pulse" 
      />

      <Box position="relative" zIndex={10}>
        <Box display="flex" alignItems="center" gap={2} mb={4}>
          <Box display="flex" alignItems="center" gap={2} px={3} py={1} bg="bg-performance-green/20" rounded="full">
            <Box as="span" w="2" h="2" bg="bg-performance-green" rounded="full" animate="pulse" />
            <Text color="text-performance-green" weight="semibold" size="sm">LIVE NOW</Text>
          </Box>
        </Box>

        <Box display="flex" flexDirection="col" gap={3}>
          {liveRaces.map((race) => (
            <LiveRaceItem
              key={race.id}
              track={race.track}
              leagueName={race.leagueName}
              onClick={() => onRaceClick?.(race.id)}
            />
          ))}
        </Box>
      </Box>
    </Box>
  );
}