import React from 'react';
import { ChevronRight } from 'lucide-react';
import { Box } from './Box';
import { Stack } from './Stack';
import { Text } from './Text';
import { Icon } from './Icon';

interface SidebarRaceItemProps {
  race: {
    id: string;
    track: string;
    scheduledAt: string;
  };
  onClick?: () => void;
  className?: string;
}

export function SidebarRaceItem({ race, onClick, className }: SidebarRaceItemProps) {
  const scheduledAtDate = new Date(race.scheduledAt);

  return (
    <Box
      onClick={onClick}
      display="flex"
      alignItems="center"
      gap={3}
      p={2}
      rounded="lg"
      cursor="pointer"
      className={`hover:bg-deep-graphite transition-colors ${className || ''}`}
    >
      <Box flexShrink={0} width="10" height="10" bg="bg-primary-blue/10" rounded="lg" display="flex" center>
        <Text size="sm" weight="bold" color="text-primary-blue">
          {scheduledAtDate.getDate()}
        </Text>
      </Box>
      <Box flexGrow={1} minWidth="0">
        <Text size="sm" weight="medium" color="text-white" block truncate>{race.track}</Text>
        <Text size="xs" color="text-gray-500" block>{scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</Text>
      </Box>
      <Icon icon={ChevronRight} size={4} color="text-gray-500" />
    </Box>
  );
}