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

export interface StatGridProps {
  stats: (StatBoxProps | StatCardProps)[];
  columns?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
  variant?: 'box' | 'card';
}

export const StatGrid = ({ 
  stats, 
  columns = 3,
  variant = 'box'
}: StatGridProps) => {
  return (
    <Grid columns={columns} gap={4}>
      {stats.map((stat, index) => (
        variant === 'box' ? (
          <StatBox key={index} {...(stat as StatBoxProps)} />
        ) : (
          <StatCard key={index} {...(stat as StatCardProps)} />
        )
      ))}
    </Grid>
  );
};