import { Skeleton } from '../ui/Skeleton.tsx'
import { cn } from '../../lib/cn.ts'

export function LoadingBlock({ rows = 5, className }: { rows?: number; className?: string }) {
  const count = Math.max(1, Math.min(rows, 50))
  return (
    <div className={cn('flex w-full flex-col gap-2', className)} aria-busy="true" aria-live="polite">
      <span className="sr-only">Loading…</span>
      {Array.from({ length: count }, (_, index) => (
        <div key={index} className="flex items-center gap-3">
          <Skeleton className="h-4 w-1/4" />
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-16" />
        </div>
      ))}
    </div>
  )
}