import React from 'react';
import { Grid } from './primitives/Grid';
import { StatBox, StatBoxProps } from './StatBox';

export interface StatGridProps {
  stats: StatBoxProps[];
  columns?: number;
}

export const StatGrid = ({ 
  stats, 
  columns = 3 
}: StatGridProps) => {
  return (
    <Grid columns={columns} gap={4}>
      {stats.map((stat, index) => (
        <StatBox key={index} {...stat} />
      ))}
    </Grid>
  );
};