import { Badge } from './Badge';
import { Box } from './Box';
import { Stack } from './Stack';
import { Surface } from './Surface';
import { Text } from './Text';

interface UpcomingRaceItemProps {
  track: string;
  car: string;
  formattedDate: string;
  formattedTime: string;
  isMyLeague: boolean;
}

export function UpcomingRaceItem({
  track,
  car,
  formattedDate,
  formattedTime,
  isMyLeague,
}: UpcomingRaceItemProps) {
  return (
    <Surface
      variant="muted"
      padding={3}
      rounded="lg"
    >
      <Text color="text-white" weight="medium" block>
        {track}
      </Text>
      <Text size="sm" color="text-gray-400" block>
        {car}
      </Text>
      <Stack direction="row" align="center" gap={2} mt={1}>
        <Text size="xs" color="text-gray-500">
          {formattedDate}
        </Text>
        <Text size="xs" color="text-gray-500">
          •
        </Text>
        <Text size="xs" color="text-gray-500">
          {formattedTime}
        </Text>
      </Stack>
      {isMyLeague && (
        <Box mt={1}>
          <Badge variant="success">
            Your League
          </Badge>
        </Box>
      )}
    </Surface>
  );
}