'use client';

import { LaconicMark } from '@/laconic-assets/laconic-mark';
import { cn } from '@/lib/utils';
import { Loader2 } from 'lucide-react';

export interface LoadingOverlayProps {
  /**
   * Controls the visibility of the overlay.
   * When false, the component returns null.
   * @default true
   */
  isLoading?: boolean;

  /**
   * Optional className for styling the overlay container.
   * This will be merged with the default styles.
   */
  className?: string;

  /**
   * Whether to show the Laconic logo in the overlay.
   * @default true
   */
  showLogo?: boolean;

  /**
   * Whether to show the loading spinner below the logo.
   * @default true
   */
  showSpinner?: boolean;

  /**
   * The z-index value for the overlay.
   * Adjust this if you need the overlay to appear above or below other elements.
   * @default 50
   */
  zIndex?: number;

  /**
   * Whether to use solid black background instead of semi-transparent.
   * Useful for initial page load and full-screen loading states.
   * @default false
   */
  solid?: boolean;
}

export function LoadingOverlay({
  isLoading = true,
  className,
  showLogo = true,
  showSpinner = true,
  zIndex = 50,
  solid = false,
}: LoadingOverlayProps) {
  if (!isLoading) return null;

  return (
    <div
      className={cn(
        'fixed inset-0 flex flex-col items-center justify-center',
        solid ? 'bg-black' : 'bg-black/90 backdrop-blur-sm',
        className,
      )}
      style={{ zIndex }}
      role="alert"
      aria-busy="true"
      aria-label="Loading"
    >
      {showLogo && (
        <div className="animate-fade-in mb-4">
          <LaconicMark className="text-white" />
        </div>
      )}
      {showSpinner && (
        <Loader2
          className="animate-spin w-6 h-6 text-white"
          aria-hidden="true"
        />
      )}
    </div>
  );
}