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

interface DriverStatsProps {
  rating: number;
  wins: number;
  podiums: number;
  winRate: string;
}

export function DriverStats({ rating, wins, podiums, winRate }: DriverStatsProps) {
  return (
    <Stack direction="row" align="center" gap={8} textAlign="center">
      <Box>
        <Text size="2xl" weight="bold" color="text-primary-blue" block>{rating}</Text>
        <Text size="xs" color="text-gray-400" block>Rating</Text>
      </Box>
      <Box>
        <Text size="2xl" weight="bold" color="text-green-400" block>{wins}</Text>
        <Text size="xs" color="text-gray-400" block>Wins</Text>
      </Box>
      <Box>
        <Text size="2xl" weight="bold" color="text-warning-amber" block>{podiums}</Text>
        <Text size="xs" color="text-gray-400" block>Podiums</Text>
      </Box>
      <Box>
        <Text size="sm" color="text-gray-400" block>{winRate}%</Text>
        <Text size="xs" color="text-gray-500" block>Win Rate</Text>
      </Box>
    </Stack>
  );
}