'use client';

import React from 'react';

/**
 * ChartGrid — Responsive grid of chart cards.
 *
 * Variants:
 * - 'default': 2 columns on desktop (lg:grid-cols-2), 1 column on mobile
 * - 'mixed': first child spans full width, remaining children in 3-column grid on desktop
 *
 * Layout:
 * - Gap of 24px (gap-6)
 *
 * Requirements: 17.6
 */

interface ChartGridProps {
  children: React.ReactNode;
  className?: string;
  variant?: 'default' | 'mixed';
}

export default function ChartGrid({ children, className = '', variant = 'default' }: ChartGridProps) {
  if (variant === 'mixed') {
    const childArray = React.Children.toArray(children);
    const [first, ...rest] = childArray;

    return (
      <div className={`space-y-6 ${className}`}>
        {/* First child: full width */}
        {first && <div className="w-full">{first}</div>}

        {/* Remaining children: 3-column grid on desktop */}
        {rest.length > 0 && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {rest}
          </div>
        )}
      </div>
    );
  }

  return (
    <div
      className={`grid grid-cols-1 lg:grid-cols-2 gap-6 ${className}`}
    >
      {children}
    </div>
  );
}