/**
 * DetailSectionSkeleton - 섹션 로딩 스켈레톤 컴포넌트
 *
 * Card 기반의 섹션 로딩 상태를 표시
 */

'use client';

import type { ReactNode } from 'react';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';
import { DetailGridSkeleton } from './DetailGridSkeleton';

export interface DetailSectionSkeletonProps {
  /** 제목 영역 표시 여부 (default: true) */
  hasTitle?: boolean;
  /** 커스텀 내용 (없으면 DetailGridSkeleton 사용) */
  children?: ReactNode;
  /** 그리드 열 수 (children이 없을 때 사용) */
  cols?: 1 | 2 | 3 | 4;
  /** 필드 개수 (children이 없을 때 사용) */
  fieldCount?: number;
  /** 추가 클래스 */
  className?: string;
}

export function DetailSectionSkeleton({
  hasTitle = true,
  children,
  cols = 2,
  fieldCount = 6,
  className,
}: DetailSectionSkeletonProps) {
  return (
    <Card className={cn('', className)}>
      {hasTitle && (
        <CardHeader className="pb-4">
          {/* 제목 스켈레톤 */}
          <Skeleton className="h-5 w-1/4" />
        </CardHeader>
      )}
      <CardContent className={hasTitle ? 'pt-0' : ''}>
        {children || (
          <DetailGridSkeleton cols={cols} fieldCount={fieldCount} />
        )}
      </CardContent>
    </Card>
  );
}

export default DetailSectionSkeleton;
