import { Box } from '@/ui/Box';
import { Grid } from '@/ui/Grid';
import { Text } from '@/ui/Text';

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

interface ProfileStatGridProps {
  stats: Stat[];
}

export function ProfileStatGrid({ stats }: ProfileStatGridProps) {
  return (
    <Grid cols={2} gap={4}>
      {stats.map((stat, idx) => (
        <Box key={idx} p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626', textAlign: 'center' }}>
          <Text size="3xl" weight="bold" color={stat.color as any} block mb={1}>{stat.value}</Text>
          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>{stat.label}</Text>
        </Box>
      ))}
    </Grid>
  );
}