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

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

  return (
    <div className="flex flex-col items-center justify-center py-6">
      <img src={logoImg} alt="Logo" className="w-12 h-12 animate-pulse mb-2" />
      <div className="text-primary font-medium">
        {text}{dots}
      </div>
    </div>
  );
}