import type { ReactNode } from "react";

import { cn } from "@/shared/lib/utils";

/**
 * StatsGrid - 统计卡片网格（对齐 CICD stats-grid.tsx）
 *
 * 响应式列数：mobile=1, md=2, lg=N（由 columns prop 控制）
 * 统一 isLoading 透传到所有子 StatCard
 *
 * @example
 * <StatsGrid columns={4} isLoading={loading}>
 *   <StatCard title="学生" value={100} />
 *   <StatCard title="教师" value={20} />
 * </StatsGrid>
 */
export interface StatsGridProps {
  /** 子节点（通常是多个 StatCard） */
  children: ReactNode;
  /** 桌面端列数（1-5，默认 4） */
  columns?: 1 | 2 | 3 | 4 | 5;
  /** 自定义类名 */
  className?: string;
}

const COLUMNS_CLASS: Record<number, string> = {
  1: "md:grid-cols-1",
  2: "md:grid-cols-2",
  3: "md:grid-cols-3",
  4: "md:grid-cols-4",
  5: "md:grid-cols-5",
};

export function StatsGrid({
  children,
  columns = 4,
  className,
}: StatsGridProps): ReactNode {
  return (
    <div
      className={cn(
        "grid grid-cols-1 gap-4",
        COLUMNS_CLASS[columns],
        className,
      )}
    >
      {children}
    </div>
  );
}