import React from "react";
import { createRoot } from "react-dom/client";
import {
    BrowserRouter,
    Routes,
    Route,
  } from "react-router-dom";

import App from "./App";
import Home from "./Home";
import ServiceProviders, { ActivateServiceProvider, NewServiceProvider } from "./ServiceProviders";
import ManageServiceProvider from "./ManageServiceProvider";
import Patients from "./Patients";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(<BrowserRouter basename="/ui">
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="/patienten" element={<Patients />}/>
        <Route path="/dienstverleners" element={<ServiceProviders />}>
          <Route path="nieuw" element={<NewServiceProvider />} />
          <Route path=":connId/activeer" element={<ActivateServiceProvider />} />
        </Route>
        <Route path="/dienstverleners/:connId" element={<ManageServiceProvider />} />
      </Route>
    </Routes>
  </BrowserRouter>);