import React from 'react';
import { Grid } from './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';
  cardVariant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline';
  font?: 'sans' | 'mono';
}

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