'use client';

import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Panel } from '@/ui/Panel';
import { ChevronRight, PlayCircle } from 'lucide-react';

interface LiveRaceItemProps {
  track: string;
  leagueName: string;
  onClick?: () => void;
}

export function LiveRaceItem({ track, leagueName, onClick }: LiveRaceItemProps) {
  return (
    <Panel
      variant="precision"
      padding="sm"
      onClick={onClick}
    >
      <Stack direction="row" align="center" justify="between" fullWidth>
        <Stack direction="row" align="center" gap={4}>
          <Icon icon={PlayCircle} size={5} intent="success" animate="pulse" />
          <Stack gap={0.5}>
            <Heading level={5} weight="bold">{track}</Heading>
            <Text size="xs" variant="low" uppercase letterSpacing="widest">{leagueName}</Text>
          </Stack>
        </Stack>
        <Icon icon={ChevronRight} size={4} intent="low" />
      </Stack>
    </Panel>
  );
}
