'use client';

/**
 * KpiGrid — Responsive grid of KPI cards.
 *
 * Layout:
 * - 4 columns on desktop (xl:grid-cols-4)
 * - 2 columns on tablet (md:grid-cols-2)
 * - 1 column on mobile (grid-cols-1)
 * - Gap of 24px (gap-6)
 *
 * Requirements: 17.5, 18.5
 */

interface KpiGridProps {
  children: React.ReactNode;
  className?: string;
}

export default function KpiGrid({ children, className = '' }: KpiGridProps) {
  return (
    <div
      className={`grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 ${className}`}
    >
      {children}
    </div>
  );
}