import MetricItem from '@/components/ui/MetricItem.tsx';
import { Grid } from '@/components/ui/layout';

type Metric = {
  icon?: React.ReactNode;
  label: string;
  value: React.ReactNode;
};

type Props = {
  items: Metric[];
  cols?: { md?: number; lg?: number };
};

const MetricsGrid = ({ items, cols = { md: 2, lg: 4 } }: Props) => {
  return (
    <Grid cols={cols} gap="md">
      {items.map((it, idx) => (
        <MetricItem key={idx} icon={it.icon} label={it.label} value={it.value} />
      ))}
    </Grid>
  );
};

export default MetricsGrid;