import { useTranslation } from 'react-i18next';
import { SpinnerIcon } from '../../ui/icons/SpinnerIcon';

interface LoadingOverlayProps {
  show: boolean;
}

export function LoadingOverlay({ show }: LoadingOverlayProps) {
  const { t } = useTranslation();

  if (!show) return null;

  return (
    <div className="absolute inset-0 z-50 flex items-center justify-center bg-warm-50/80 dark:bg-navy-950/80 backdrop-blur-sm">
      <div className="flex flex-col items-center gap-4">
        <SpinnerIcon className="w-12 h-12 text-teal-600 dark:text-teal-400 animate-spin" />
        <p className="text-warm-600 dark:text-warm-300 text-sm font-medium">
          {t('common.connectingToServer')}
        </p>
      </div>
    </div>
  );
}