/**
 * DetailFieldSkeleton - 필드 로딩 스켈레톤 컴포넌트
 *
 * 개별 필드의 로딩 상태를 표시
 */

'use client';

import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

export interface DetailFieldSkeletonProps {
  /** 그리드 span (1~4) */
  colSpan?: 1 | 2 | 3 | 4;
  /** 라벨 너비 (default: 'w-20') */
  labelWidth?: string;
  /** 입력 높이 (default: 'h-10') */
  inputHeight?: string;
  /** 추가 클래스 */
  className?: string;
}

// colSpan에 따른 그리드 클래스
const colSpanClasses = {
  1: '',
  2: 'md:col-span-2',
  3: 'md:col-span-2 lg:col-span-3',
  4: 'md:col-span-2 lg:col-span-4',
};

export function DetailFieldSkeleton({
  colSpan = 1,
  labelWidth = 'w-20',
  inputHeight = 'h-10',
  className,
}: DetailFieldSkeletonProps) {
  return (
    <div className={cn('space-y-2', colSpanClasses[colSpan], className)}>
      {/* 라벨 스켈레톤 */}
      <Skeleton className={cn('h-4', labelWidth)} />
      {/* 입력 필드 스켈레톤 */}
      <Skeleton className={cn('w-full', inputHeight)} />
    </div>
  );
}

export default DetailFieldSkeleton;
