'use client';

import React from 'react';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';

interface StatItem {
  label: string;
  value: string | number;
  subValue?: string;
  color?: string;
}

interface DriverStatsPanelProps {
  stats: StatItem[];
}

export function DriverStatsPanel({ stats }: DriverStatsPanelProps) {
  return (
    <Box display="grid" gridCols={{ base: 2, sm: 3, lg: 6 }} gap="px" overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-charcoal-outline">
      {stats.map((stat, index) => (
        <Box key={index} display="flex" flexDirection="col" gap={1} bg="bg-deep-charcoal" p={5} transition hoverBg="bg-deep-charcoal/80">
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
            {stat.label}
          </Text>
          <Box display="flex" alignItems="baseline" gap={1.5}>
            <Text 
              size="2xl" 
              weight="bold" 
              font="mono" 
              color={stat.color || 'text-white'}
            >
              {stat.value}
            </Text>
            {stat.subValue && (
              <Text size="xs" weight="bold" color="text-gray-600" font="mono">
                {stat.subValue}
              </Text>
            )}
          </Box>
        </Box>
      ))}
    </Box>
  );
}