import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import useAuthStore from '../../store/authStore';

const ProtectedRoute = () => {
    // Grab the state directly from your Zustand store
    const { isAuthenticated, isLoading } = useAuthStore();

    // 1. App is currently pinging Django to verify the HttpOnly cookie
    if (isLoading) {
        return (
            <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20vh' }}>
                <h2>Loading Secure Environment...</h2>
            </div>
        );
    }

    // 2. The check failed (no cookie or expired cookie)
    if (!isAuthenticated) {
        return <Navigate to="/login" replace />;
    }

    // 3. The check passed! Render the layout shell and the protected children
    return <Outlet />;
};

export default ProtectedRoute;