import { ChevronRight, PlayCircle } from 'lucide-react';
import { Box } from './Box';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Text } from './Text';

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

export function LiveRaceItem({ track, leagueName, onClick }: LiveRaceItemProps) {
  return (
    <Box
      onClick={onClick}
      display="flex"
      alignItems="center"
      justifyContent="between"
      p={4}
      bg="bg-deep-graphite/80"
      rounded="lg"
      border
      borderColor="border-performance-green/20"
      cursor="pointer"
      hoverBorderColor="performance-green/40"
      transition
    >
      <Box display="flex" alignItems="center" gap={4}>
        <Box p={2} bg="bg-performance-green/20" rounded="lg">
          <Icon icon={PlayCircle} size={5} color="rgb(16, 185, 129)" />
        </Box>
        <Box>
          <Heading level={3}>{track}</Heading>
          <Text size="sm" color="text-gray-400">{leagueName}</Text>
        </Box>
      </Box>
      <Icon icon={ChevronRight} size={5} color="rgb(156, 163, 175)" />
    </Box>
  );
}