import { SidebarItem } from '@/ui/SidebarItem';
import { Text } from '@/ui/Text';
import React from 'react';

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

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

  return (
    <SidebarItem
      onClick={onClick}
      icon={
        <Text size="sm" weight="bold" variant="primary">
          {scheduledAtDate.getDate()}
        </Text>
      }
    >
      <Text size="sm" weight="medium" variant="high" block truncate>{race.track}</Text>
      <Text size="xs" variant="low" block>
        {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
      </Text>
    </SidebarItem>
  );
}
