import { Box } from './Box';
import { Text } from './Text';

export interface RaceSummaryProps {
  track: string;
  meta: string;
  date: string;
}

export const RaceSummary = ({ track, meta, date }: RaceSummaryProps) => {
  return (
    <Box display="flex" alignItems="center" justifyContent="between" gap={3} fullWidth>
      <Box flex={1} minWidth="0">
        <Text size="xs" variant="high" block truncate>{track}</Text>
        <Text size="xs" variant="low" block truncate>{meta}</Text>
      </Box>
      <Box textAlign="right">
        <Text size="xs" variant="low" whiteSpace="nowrap">
          {date}
        </Text>
      </Box>
    </Box>
  );
};