"use client";

import type { ReactNode } from "react";
import { Loader2 } from "lucide-react";

import { cn } from "@/lib/utils";

type ReportLoadingPanelProps = {
  loading: boolean;
  className?: string;
  minHeightClassName?: string;
  children?: ReactNode;
  label?: string;
};

/**
 * Keeps report panels at a stable size while data loads.
 * Shows a light overlay spinner instead of collapsing content to a short loading row.
 */
export function ReportLoadingPanel({
  loading,
  className,
  minHeightClassName = "min-h-[calc(100vh-280px)]",
  children,
  label = "Loading…",
}: ReportLoadingPanelProps) {
  return (
    <div className={cn("relative", minHeightClassName, className)}>
      {children}
      {loading ? (
        <div
          className="absolute inset-0 z-20 flex items-center justify-center bg-background/55 backdrop-blur-[1px]"
          role="status"
          aria-live="polite"
          aria-label={label}
        >
          <div className="flex items-center gap-2 rounded-lg border border-border/70 bg-card px-3 py-2 shadow-sm">
            <Loader2 className="size-4 animate-spin text-muted-foreground" />
            <span className="text-muted-foreground text-xs">{label}</span>
          </div>
        </div>
      ) : null}
    </div>
  );
}