import React from 'react';
import Logo from '../assets/images/LynkedUp_Pro_F_logo_Y.png';

const Loader = ({ fullScreen = false, text = "Loading..." }) => {
    const content = (
        <div className="flex flex-col items-center justify-center space-y-4">
            <div className="relative">
                {/* Pulsing Ripple Effect */}
                <div className="absolute inset-0 bg-blue-500/20 rounded-full animate-ping"></div>
                <div className="relative bg-white dark:bg-black p-3 rounded-2xl shadow-xl shadow-blue-500/10 border border-zinc-100 dark:border-white/10 z-10">
                    <img src={Logo} alt="Loading..." className="w-12 h-12 object-contain animate-pulse" />
                </div>
            </div>
            {text && (
                <div className="flex flex-col items-center">
                    <p className="text-xs font-bold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 animate-pulse">{text}</p>
                    <div className="flex space-x-1 mt-2">
                        <div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
                        <div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
                        <div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce"></div>
                    </div>
                </div>
            )}
        </div>
    );

    if (fullScreen) {
        return (
            <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-zinc-50/80 dark:bg-black/80 backdrop-blur-md transition-all duration-500">
                {content}
            </div>
        );
    }

    return <div className="flex items-center justify-center p-8">{content}</div>;
};

export default Loader;
