import { useEffect, useState } from 'react';
import logoImg from '/src/images/matrimonial_icon.png';
interface LoadingSpinnerProps {
  text?: string;
}

export default function LoadingSpinner({ text = "Loading" }: LoadingSpinnerProps) {
  const [dots, setDots] = useState('');
  
  useEffect(() => {
    const interval = setInterval(() => {
      setDots(prev => {
        if (prev.length >= 3) return '';
        return prev + '.';
      });
    }, 500);
    
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="fixed inset-0 flex flex-col items-center justify-center bg-slate-500 bg-opacity-50 z-50">
      <div className="relative w-24 h-24 mb-4">
        <div className="absolute inset-0 border-4 border-t-primary border-opacity-30 rounded-full animate-spin"></div>
        {/* You can place your app logo here */}
        <img 
          src={logoImg} 
          alt="Logo" 
          className="absolute inset-0 w-16 h-16 m-auto"
        />
      </div>
      <p className="text-white text-xl font-medium">
        {text}{dots}
      </p>
    </div>
  );
}