import { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface MetricsGridProps {
  metrics: Array<{
    title: string;
    value: string | number;
    subtitle?: string;
    icon?: ReactNode;
    color?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';
  }>;
  className?: string;
  columns?: 2 | 3 | 4;
}

export function MetricsGrid({
  metrics,
  className,
  columns = 4,
}: MetricsGridProps) {
  const gridCols = {
    2: 'grid-cols-2',
    3: 'grid-cols-3',
    4: 'grid-cols-2 lg:grid-cols-4',
  };

  return (
    <div className={cn('grid gap-4', gridCols[columns], className)}>
      {metrics.map((metric, index) => (
        <div key={index} className="text-center">
          <div
            className={cn(
              'text-xl font-bold',
              metric.color === 'primary' && 'text-[var(--primary)]',
              metric.color === 'success' && 'text-[var(--success)]',
              metric.color === 'warning' && 'text-[var(--accent)]',
              metric.color === 'destructive' && 'text-[var(--destructive)]',
              !metric.color && 'text-[var(--foreground)]'
            )}
          >
            {metric.value}
          </div>
          <div className="text-xs text-[var(--muted-foreground)]">
            {metric.title}
          </div>
          {metric.subtitle && (
            <div className="text-xs text-[var(--muted-foreground)] mt-1">
              {metric.subtitle}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}
