import { useLocation, Outlet, Navigate } from "react-router-dom";
import useAuth from "./hooks/useAuth";
import Navbar from "./components/navbar/Navbar";
import Sidebar from "./components/sidebar/Sidebar";
import { Box } from "@mui/material";

const ProtectedRoute = () => {
  const auth = useAuth();
  const location = useLocation();

  /* Temporary data */
  return auth?.isLoggedIn ? (
    <>
      <Navbar />
      <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
        <Box sx={{ flexGrow: 1 }}>
          <Outlet />
        </Box>
        <Box>
          <Sidebar />
        </Box>
      </Box>
    </>
  ) : (
    <Navigate to="/login" state={{ from: location }} replace />
  );
};

export default ProtectedRoute;