'use client';

import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
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 (
    <Box
      onClick={onClick}
      cursor="pointer"
      p={3}
      rounded="md"
      bg="transparent"
      hoverBg="white/[0.03]"
      transition
      display="flex"
      alignItems="center"
      gap={3}
    >
      <Stack 
        width="10" 
        height="10" 
        align="center" 
        justify="center" 
        bg="var(--ui-color-bg-base)" 
        border 
        borderColor="var(--ui-color-border-default)"
        rounded="md"
      >
        <Text size="xs" weight="bold" variant="primary" mono>
          {scheduledAtDate.getDate()}
        </Text>
      </Stack>
      <Stack gap={0.5} flexGrow={1}>
        <Text size="sm" weight="bold" variant="high" block truncate>{race.track}</Text>
        <Text size="xs" variant="telemetry" mono block>
          {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
        </Text>
      </Stack>
    </Box>
  );
}