import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./Pages/App";
import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage";
import YourProjectsPage from "./Pages/YourProjectsPage";
import AdminAddProject from "./Pages/AdminPages/AdminAddProject";
import AdminManageProjects from "./Pages/AdminPages/AdminManageProjects";
import AdminManageUsers from "./Pages/AdminPages/AdminManageUsers";
import AdminAddUser from "./Pages/AdminPages/AdminAddUser";

// This is where the routes are mounted
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/admin",
    element: <AdminMenuPage />,
  },
  {
    path: "/pm",
    element: <YourProjectsPage />,
  },
  {
    path: "/user",
    element: <YourProjectsPage />,
  },
  {
    path: "/addProject",
    element: <AdminAddProject />,
  },
  {
    path: "/adminAddUser",
    element: <AdminAddUser />,
  },
  {
    path: "/adminManageProject",
    element: <AdminManageProjects />,
  },
  {
    path: "/adminManageUser",
    element: <AdminManageUsers />,
  },
]);

// Semi-hacky way to get the root element
const root = document.getElementById("root") ?? document.createElement("div");

// Render the router at the root
ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);