import { CommentThreadSkeleton } from '../comment-thread';
import { cn } from '@/lib/utils';

export interface CommentSectionSkeletonProps {
  /** Number of skeleton rows (default 4) */
  rows?: number;
  className?: string;
}

/**
 * Skeleton for the full comment section: mimics 3–4 comment rows.
 * Uses only Tailwind spacing scale and layout primitives.
 */
export function CommentSectionSkeleton({
  rows = 4,
  className,
}: CommentSectionSkeletonProps) {
  return (
    <div
      className={cn('space-y-4', className)}
      data-testid="comment-section-skeleton"
    >
      {Array.from({ length: Math.min(Math.max(rows, 1), 6) }).map((_, i) => (
        <CommentThreadSkeleton key={i} />
      ))}
    </div>
  );
}