import React from 'react';
import { Box } from './Box';
import { Stack } from './Stack';
import { Text } from './Text';

interface RaceSummaryItemProps {
  track: string;
  meta: string;
  date: Date;
}

export function RaceSummaryItem({ track, meta, date }: RaceSummaryItemProps) {
  return (
    <Box display="flex" justifyContent="between" gap={3}>
      <Box flexGrow={1} minWidth="0">
        <Text size="xs" color="text-white" block truncate>{track}</Text>
        <Text size="xs" color="text-gray-400" block truncate>{meta}</Text>
      </Box>
      <Box textAlign="right">
        <Text size="xs" color="text-gray-500" className="whitespace-nowrap">
          {date.toLocaleDateString(undefined, {
            month: 'short',
            day: 'numeric'
          })}
        </Text>
      </Box>
    </Box>
  );
}