// R14 B.2: shared skeleton for /manage/* loading states. Replaces 12+ pages
// that each rendered `<div className="text-text-muted p-8 text-center">
// Loading...</div>` — a flash of plain text on every settings open. The
// skeleton card matches the typical manage-page layout (header + N rows of
// form fields) so users see something resembling the real shape before
// data arrives.
export default function ManagePageSkeleton({ rows = 5 }: { rows?: number }) {
  return (
    <div className="max-w-2xl mx-auto" aria-busy="true" aria-live="polite">
      <div className="h-8 w-48 bg-surface-light rounded mb-6 animate-pulse" />
      <div className="bg-surface rounded-lg p-6 space-y-4 animate-pulse">
        {Array.from({ length: rows }).map((_, i) => (
          <div key={i} className="space-y-2">
            <div className="h-4 w-32 bg-surface-light rounded" />
            <div className="h-10 w-full bg-surface-light rounded" />
          </div>
        ))}
        <div className="flex justify-end pt-4">
          <div className="h-10 w-28 bg-surface-light rounded-lg" />
        </div>
      </div>
    </div>
  );
}