"use client";
import React, { useEffect, useState } from "react";

const Preloader = () => {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsLoading(false);
        }, 1500); // Minimum 1.5s visibility for the logo animation

        const handleLoad = () => {
            setIsLoading(false);
        };

        if (document.readyState === 'complete') {
            setIsLoading(false);
        } else {
            window.addEventListener('load', handleLoad);
        }

        return () => {
            clearTimeout(timer);
            window.removeEventListener('load', handleLoad);
        };
    }, []);

    if (!isLoading) return null;

    return (
        <div id="preloader">
            <div className="bd-loader-inner">
                <div className="bd-loader text-center">
                    <img
                        src="/logo-1.webp"
                        alt="Metatron Logo"
                        style={{
                            width: '150px',
                            height: 'auto',
                            animation: 'rotate-smooth 3s linear infinite'
                        }}
                    />
                </div>
            </div>
        </div>
    );
};

export default Preloader;
