// tdd-guard:skip — rein presentational (nur JSX, keine Logik); Repo hat kein RTL/Component-Render-Setup (nur Logic-Tests in __tests__/).
// Skeleton-Loader (KAR-592). Tailwind-only (CLAUDE.md), bg-muted + rounded-sm (2px-Radius per Design-System).
// Genutzt von loading.tsx pro Route-Segment fuer async Server-Components.

export function LoadingSkeleton({ rows = 5 }: { rows?: number }) {
  return (
    <div className="space-y-3 animate-pulse" aria-busy="true" aria-live="polite">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="h-10 bg-muted rounded-sm" />
      ))}
      <span className="sr-only">Inhalt wird geladen…</span>
    </div>
  )
}

export function TableSkeleton({ rows = 8 }: { rows?: number }) {
  return (
    <div className="animate-pulse" aria-busy="true" aria-live="polite">
      <div className="h-10 bg-muted rounded-sm mb-3" />
      <div className="space-y-2">
        {Array.from({ length: rows }).map((_, i) => (
          <div key={i} className="h-12 bg-muted rounded-sm" />
        ))}
      </div>
      <span className="sr-only">Tabelle wird geladen…</span>
    </div>
  )
}

export function CardSkeleton({ count = 3 }: { count?: number }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 animate-pulse" aria-busy="true" aria-live="polite">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="border border-border rounded-sm p-5 space-y-3">
          <div className="h-5 w-1/2 bg-muted rounded-sm" />
          <div className="h-3 w-3/4 bg-muted rounded-sm" />
          <div className="h-3 w-2/3 bg-muted rounded-sm" />
          <div className="h-20 bg-muted rounded-sm" />
        </div>
      ))}
      <span className="sr-only">Inhalt wird geladen…</span>
    </div>
  )
}

// Ganzseiten-Skeleton: Header-Zeile + Karten-Reihe + Tabelle. Default-Fallback fuer
// daten-lastige Segmente, wenn kein spezifischeres Skeleton passt.
export function PageSkeleton() {
  return (
    <div className="space-y-6 p-4 sm:p-6 animate-pulse" aria-busy="true" aria-live="polite">
      <div className="h-8 w-1/3 bg-muted rounded-sm" />
      <CardSkeleton count={3} />
      <TableSkeleton rows={6} />
      <span className="sr-only">Seite wird geladen…</span>
    </div>
  )
}