import React from 'react';
import { Metric, MetricProps } from './Metric';

interface MetricGridProps {
  metrics: MetricProps[];
  columns?: 2 | 3 | 4;
  dense?: boolean;
}

export const MetricGrid: React.FC<MetricGridProps> = ({
  metrics,
  columns = 4,
  dense = false,
}) => {
  const gridClasses = {
    2: 'sm:grid-cols-2',
    3: 'sm:grid-cols-2 lg:grid-cols-3',
    4: 'sm:grid-cols-2 lg:grid-cols-4',
  };

  return (
    <div className={`grid gap-${dense ? '2' : '3'} ${gridClasses[columns]}`}>
      {metrics.map((metric, index) => (
        <Metric key={`${metric.label}-${index}`} {...metric} />
      ))}
    </div>
  );
};
