/**
 * DetailGridSkeleton - 그리드 로딩 스켈레톤 컴포넌트
 *
 * 여러 필드의 그리드 로딩 상태를 표시
 */

'use client';

import { cn } from '@/lib/utils';
import { DetailFieldSkeleton } from './DetailFieldSkeleton';

export interface DetailGridSkeletonProps {
  /** 그리드 열 수 (default: 2) */
  cols?: 1 | 2 | 3 | 4;
  /** 필드 개수 (default: 6) */
  fieldCount?: number;
  /** 그리드 간격 (default: 'md') */
  gap?: 'sm' | 'md' | 'lg';
  /** 추가 클래스 */
  className?: string;
}

// 열 수에 따른 그리드 클래스
const colsClasses = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 md:grid-cols-2',
  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
};

// 간격에 따른 gap 클래스
const gapClasses = {
  sm: 'gap-4',
  md: 'gap-6',
  lg: 'gap-8',
};

export function DetailGridSkeleton({
  cols = 2,
  fieldCount = 6,
  gap = 'md',
  className,
}: DetailGridSkeletonProps) {
  return (
    <div
      className={cn(
        'grid',
        colsClasses[cols],
        gapClasses[gap],
        className
      )}
    >
      {Array.from({ length: fieldCount }).map((_, index) => (
        <DetailFieldSkeleton key={index} />
      ))}
    </div>
  );
}

export default DetailGridSkeleton;
