'use client';

import { LiveRaceItem } from '@/components/races/LiveRaceItem';
import type { RaceViewData } from '@/lib/view-data/RacesViewData';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Panel } from '@/ui/Panel';
import { Icon } from '@/ui/Icon';
import { Zap } from 'lucide-react';

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

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

  return (
    <Panel variant="glass" padding="md">
      <Stack gap={4}>
        <Stack direction="row" align="center" gap={2}>
          <Icon icon={Zap} size={4} intent="success" animate="pulse" />
          <Text weight="bold" size="sm" variant="success" uppercase letterSpacing="widest">
            Live Sessions
          </Text>
        </Stack>
        
        <Stack gap={2}>
          {liveRaces.map((race) => (
            <LiveRaceItem
              key={race.id}
              track={race.track}
              leagueName={race.leagueName ?? 'Official'}
              onClick={() => onRaceClick(race.id)}
            />
          ))}
        </Stack>
      </Stack>
    </Panel>
  );
}