import { Loader2 } from "lucide-react";

/**
 * Full-region loading indicator for cases a skeleton doesn't fit (route
 * transitions, full-page Suspense fallbacks). Prefer `ListSkeleton`/
 * `CardSkeleton` (skeleton.tsx) for known list/card shapes — a skeleton
 * that mirrors the eventual layout reduces perceived load time more than
 * a spinner does.
 */
export function LoadingState({ label = "Loading…" }: { label?: string }) {
  return (
    <div role="status" className="flex flex-col items-center justify-center gap-3 px-6 py-16 text-muted">
      <Loader2 className="h-6 w-6 animate-spin" aria-hidden="true" />
      <span className="text-sm">{label}</span>
    </div>
  );
}