/**
 * DetailGrid - 상세 페이지 반응형 그리드 컴포넌트
 *
 * 1~4열 반응형 그리드 레이아웃 제공
 * 모바일에서는 자동으로 1열로 변환
 */

'use client';

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

export interface DetailGridProps {
  /** 그리드 열 수 (default: 2) */
  cols?: 1 | 2 | 3 | 4 | 5 | 6;
  /** 그리드 간격 (default: 'md') */
  gap?: 'sm' | 'md' | 'lg';
  /** 그리드 내용 */
  children: ReactNode;
  /** 추가 클래스 */
  className?: string;
}

// 열 수에 따른 그리드 클래스
// PC(lg): 설정값, 태블릿(md): 4열, 작은태블릿(sm): 2열, 모바일: 1열
const colsClasses = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 md:grid-cols-2',
  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
  5: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
  6: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6',
};

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

export function DetailGrid({
  cols = 2,
  gap = 'md',
  children,
  className,
}: DetailGridProps) {
  return (
    <div
      className={cn(
        'grid',
        colsClasses[cols],
        gapClasses[gap],
        className
      )}
    >
      {children}
    </div>
  );
}

export default DetailGrid;
