'use client';

import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { Zap, ChevronRight } from 'lucide-react';
import Link from 'next/link';

interface RacesLiveRailProps {
  liveRaces: any[];
  onRaceClick: (id: string) => void;
}

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

  return (
    <Stack gap={3}>
      <Stack direction="row" align="center" gap={2} paddingX={1}>
        <Icon icon={Zap} size={3} intent="success" />
        <Text size="xs" variant="success" weight="bold" uppercase letterSpacing="widest">
          Live Now
        </Text>
      </Stack>
      
      <Box 
        display="flex" 
        gap={4} 
        overflowX="auto" 
        paddingBottom={2}
        hideScrollbar
      >
        {liveRaces.map(race => (
          <Surface 
            key={race.id}
            as={Link}
            href={`/races/${race.id}`}
            variant="precision"
            padding="sm"
            onClick={(e: React.MouseEvent) => {
              e.preventDefault();
              onRaceClick(race.id);
            }}
            cursor="pointer"
            minWidth="280px"
            position="relative"
            hoverBg="rgba(255, 255, 255, 0.02)"
            display="block"
            style={{ textDecoration: 'none', color: 'inherit' }}
          >
            <Box 
              position="absolute" 
              top={0} 
              left={0} 
              right={0} 
              height="2px" 
              bg="var(--ui-color-intent-success)" 
            />
            <Stack gap={2}>
              <Text size="xs" variant="low" weight="bold" uppercase truncate>
                {race.leagueName}
              </Text>
              <Text size="sm" weight="bold" truncate>
                {race.track}
              </Text>
              <Stack direction="row" align="center" justify="between">
                <Text size="xs" variant="success" weight="bold">
                  {race.timeLabel}
                </Text>
                <Icon icon={ChevronRight} size={3} intent="low" />
              </Stack>
            </Stack>
          </Surface>
        ))}
      </Box>
    </Stack>
  );
}