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

/**
 * Grid wrapper for small multiples: 1 col ≤ 360 px, 2 cols on phones, 3–4 on desktop. Each child should be a
 * chart with the same axes so facets compare (dataviz rule: facet instead of a 5th+ series on all-pairs forms).
 */
export function SmallMultiples({ children, columns = 3, className }: { children: ReactNode; columns?: 2 | 3 | 4; className?: string }) {
  return (
    <div
      className={cn(
        'grid gap-x-6 gap-y-6 min-[361px]:grid-cols-2',
        columns >= 3 && 'lg:grid-cols-3',
        columns === 4 && 'xl:grid-cols-4',
        className,
      )}
    >
      {children}
    </div>
  );
}