import * as React from "react"
import { cn } from "../../lib/utils"

interface PageLoaderProps {
  /** Number of skeleton rows to show. Default: 5. */
  rows?: number
  className?: string
}

/**
 * Page-level skeleton loader. Renders animated skeleton rows as a loading placeholder.
 *
 * @example
 * if (loading) return <PageLoader />
 */
export function PageLoader({ rows = 5, className }: PageLoaderProps) {
  return (
    <div className={cn("w-full space-y-3 p-4", className)} aria-busy="true" aria-label="Loading">
      <div className="h-8 w-1/3 rounded-md bg-muted animate-pulse" />
      <div className="space-y-2">
        {Array.from({ length: rows }).map((_, i) => (
          <div
            key={i}
            className="h-12 w-full rounded-md bg-muted animate-pulse"
            style={{ opacity: 1 - i * 0.1 }}
          />
        ))}
      </div>
    </div>
  )
}