import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Grid } from '@/ui/Grid';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { StatGridItem } from '@/ui/StatGridItem';
import { TrendingUp } from 'lucide-react';

interface CareerStatsProps {
  stats: {
    totalRaces: number;
    wins: number;
    podiums: number;
    consistency: number | null;
  };
}

export function CareerStats({ stats }: CareerStatsProps) {
  return (
    <Card>
      <Box mb={4}>
        <Heading level={2} icon={<Icon icon={TrendingUp} size={5} color="#10b981" />}>
          Career Statistics
        </Heading>
      </Box>
      <Grid cols={2} gap={4}>
        <StatGridItem label="Races" value={stats.totalRaces} />
        <StatGridItem label="Wins" value={stats.wins} color="text-performance-green" />
        <StatGridItem label="Podiums" value={stats.podiums} color="text-warning-amber" />
        <StatGridItem label="Consistency" value={`${stats.consistency}%`} color="text-primary-blue" />
      </Grid>
    </Card>
  );
}