'use client';

import { useEffect } from 'react';
import { useSessionStore } from '../../Store/Sesion.Store';

// Simple full-screen loading component.
const FullScreenLoader = () => {
    return (
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh',
                width: '100vw',
                position: 'fixed',
                top: 0,
                left: 0,
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                zIndex: 9999,
                color: '#000',
            }}
        >
            <p>Cargando...</p>
        </div>
    );
};

export function SessionInitializer({ children }: { children: React.ReactNode }) {
    const loading = useSessionStore((state) => state.loading);
    const checkSession = useSessionStore((state) => state.checkSession);

    useEffect(() => {
        // The check inside the effect prevents re-running on hot reloads in development
        if (useSessionStore.getState().loading) {
            checkSession();
        }
    }, [checkSession]);

    if (loading) {
        return <FullScreenLoader />;
    }

    return <>{children}</>;
}
