import React from 'react';
import { PlayCircle, ChevronRight } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import type { RaceViewData } from '@/lib/view-data/RacesViewData';

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

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

  return (
    <Box style={{ 
      position: 'relative', 
      overflow: 'hidden', 
      borderRadius: '0.75rem', 
      background: 'linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1), transparent)', 
      border: '1px solid rgba(16, 185, 129, 0.3)', 
      padding: '1.5rem' 
    }}>
      <Box style={{ position: 'absolute', top: 0, right: 0, width: '8rem', height: '8rem', backgroundColor: 'rgba(16, 185, 129, 0.2)', borderRadius: '9999px', filter: 'blur(24px)' }} />
      
      <Box style={{ position: 'relative', zIndex: 10 }}>
        <Box style={{ marginBottom: '1rem' }}>
          <Stack direction="row" align="center" gap={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.2)', padding: '0.25rem 0.75rem', borderRadius: '9999px', width: 'fit-content' }}>
            <Box style={{ width: '0.5rem', height: '0.5rem', backgroundColor: '#10b981', borderRadius: '9999px' }} />
            <Text weight="semibold" size="sm" color="text-performance-green">LIVE NOW</Text>
          </Stack>
        </Box>
        
        <Stack gap={3}>
          {liveRaces.map((race) => (
            <Box
              key={race.id}
              onClick={() => onRaceClick(race.id)}
              style={{ 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'space-between', 
                padding: '1rem', 
                backgroundColor: 'rgba(15, 17, 21, 0.8)', 
                borderRadius: '0.5rem', 
                border: '1px solid rgba(16, 185, 129, 0.2)', 
                cursor: 'pointer' 
              }}
            >
              <Stack direction="row" align="center" gap={4}>
                <Box style={{ padding: '0.5rem', backgroundColor: 'rgba(16, 185, 129, 0.2)', borderRadius: '0.5rem' }}>
                  <PlayCircle style={{ width: '1.25rem', height: '1.25rem', color: '#10b981' }} />
                </Box>
                <Box>
                  <Heading level={3}>{race.track}</Heading>
                  <Text size="sm" color="text-gray-400">{race.leagueName}</Text>
                </Box>
              </Stack>
              <ChevronRight style={{ width: '1.25rem', height: '1.25rem', color: '#9ca3af' }} />
            </Box>
          ))}
        </Stack>
      </Box>
    </Box>
  );
}