'use client';

import { useLoadingStore } from '@/store/loading-store';
import { Loader2 } from 'lucide-react';

export function LoadingOverlay() {
  const { isLoading, loadingMessage } = useLoadingStore();

  if (!isLoading) return null;

  return (
    <div
      className="fixed inset-0 z-[10000] bg-background/80 backdrop-blur-sm flex items-center justify-center animate-fadeIn"
      role="dialog"
      aria-busy="true"
      aria-label="Loading"
    >
      <div className="bg-card border border-border rounded-lg p-6 shadow-2xl flex flex-col items-center gap-4 min-w-[300px]">
        <Loader2 className="h-12 w-12 text-primary animate-spin" aria-hidden="true" />
        {loadingMessage && (
          <p className="text-sm font-medium text-foreground text-center">
            {loadingMessage}
          </p>
        )}
        <p className="text-xs text-muted-foreground">Please wait...</p>
      </div>
    </div>
  );
}