import React from 'react';
import { Grid } from './primitives/Grid';
import { GridItem } from './primitives/GridItem';
import { Surface } from './primitives/Surface';
import { Text } from './Text';
import { Stack } from './primitives/Stack';

type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 12;

interface StatItem {
  label: string;
  value: string | number;
  subValue?: string;
  color?: string;
  icon?: React.ElementType;
}

interface StatGridProps {
  stats: StatItem[];
  cols?: GridCols;
  mdCols?: GridCols;
  lgCols?: GridCols;
  className?: string;
}

export function StatGrid({ stats, cols = 2, mdCols = 3, lgCols = 4, className = '' }: StatGridProps) {
  return (
    <Grid 
      cols={cols}
      mdCols={mdCols}
      lgCols={lgCols}
      gap={4} 
      className={className}
    >
      {stats.map((stat, index) => (
        <GridItem key={index}>
          <Surface variant="muted" padding={4} rounded="lg" border className="h-full">
            <Stack gap={1}>
              <Text size="xs" color="text-gray-500" uppercase weight="semibold" letterSpacing="wider">
                {stat.label}
              </Text>
              <Stack direction="row" align="baseline" gap={2}>
                <Text size="2xl" weight="bold" font="mono" color={stat.color || 'text-white'}>
                  {stat.value}
                </Text>
                {stat.subValue && (
                  <Text size="xs" color="text-gray-500" font="mono">
                    {stat.subValue}
                  </Text>
                )}
              </Stack>
            </Stack>
          </Surface>
        </GridItem>
      ))}
    </Grid>
  );
}