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

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

interface ProfileStatGridProps {
  stats: Stat[];
}

export function ProfileStatGrid({ stats }: ProfileStatGridProps) {
  return (
    <Grid cols={2} mdCols={4} gap={4}>
      {stats.map((stat, idx) => (
        <Box 
          key={idx} 
          p={4} 
          bg="bg-[#0f1115]" 
          rounded="xl" 
          border 
          borderColor="border-[#262626]" 
          textAlign="center"
        >
          <Text size="3xl" weight="bold" color={stat.color} block mb={1}>{stat.value}</Text>
          <Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em">{stat.label}</Text>
        </Box>
      ))}
    </Grid>
  );
}