import { Badge } from '@/ui/Badge';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';

interface UpcomingRaceItemProps {
  track: string;
  car: string;
  formattedDate: string;
  formattedTime: string;
  isMyLeague: boolean;
}

export function UpcomingRaceItem({
  track,
  car,
  formattedDate,
  formattedTime,
  isMyLeague,
}: UpcomingRaceItemProps) {
  return (
    <Surface
      variant="muted"
      padding={4}
      rounded="none"
      border
      borderColor="border-gray/30"
      className="hover:border-primary-accent/30 transition-colors bg-panel-gray/20 group"
    >
      <Stack direction="row" align="center" gap={4}>
        <Stack w="1" h="8" bg="primary-accent" opacity={0.3} className="group-hover:opacity-100 transition-opacity" />
        <Stack flexGrow={1}>
          <Text color="text-white" weight="bold" block className="tracking-tight">
            {track}
          </Text>
          <Text size="xs" color="text-gray-500" block weight="medium" className="uppercase tracking-widest mt-0.5">
            {car}
          </Text>
        </Stack>
        <Stack align="end" gap={1}>
          <Text size="xs" color="text-gray-400" font="mono" weight="bold">
            {formattedDate}
          </Text>
          <Text size="xs" color="text-gray-600" font="mono">
            {formattedTime}
          </Text>
        </Stack>
      </Stack>
      {isMyLeague && (
        <Stack mt={3} display="flex" justifyContent="end">
          <Badge variant="success" size="xs">
            YOUR LEAGUE
          </Badge>
        </Stack>
      )}
    </Surface>
  );
}