import { Spinner } from "./Spinner";

interface LoadingOverlayProps {
  /** Whether the overlay is visible */
  isVisible: boolean;
  /** Main loading message */
  title: string;
  /** Optional subtitle/description */
  subtitle?: string;
  /** Spinner size */
  spinnerSize?: "xs" | "sm" | "md" | "lg" | "xl";
  /** Custom spinner color */
  spinnerClassName?: string;
  /** Custom overlay background */
  overlayClassName?: string;
}

export function LoadingOverlay({
  isVisible,
  title,
  subtitle,
  spinnerSize = "xl",
  spinnerClassName = "text-blue-600",
  overlayClassName = "bg-white/80 backdrop-blur-sm",
}: LoadingOverlayProps) {
  if (!isVisible) {
    return null;
  }

  return (
    <div className={`fixed inset-0 z-50 flex items-center justify-center ${overlayClassName}`}>
      <div className="text-center max-w-sm mx-auto px-4">
        <div className="flex justify-center mb-6">
          <Spinner size={spinnerSize} className={spinnerClassName} />
        </div>
        <p className="text-lg font-medium text-gray-900">{title}</p>
        {subtitle && <p className="text-sm text-gray-600 mt-2">{subtitle}</p>}
      </div>
    </div>
  );
}
