import { Group, Loader } from "@mantine/core";
import { Navigate, Outlet } from "react-router";
import { useAuth } from "../AuthProvider";

export function ProtectedRoute() {
    const { loggedUser, isLoading } = useAuth();

    if (!loggedUser && isLoading)
        return (
            <Group align="center" justify="center" h="80vh" w="100%">
                <Loader color="pink" />
            </Group>
        );

    if (!loggedUser?.logged) {
        return <Navigate to="/" replace />;
    }

    return <Outlet />;
}