import * as React from "react";
import Login, { UsernameContext } from "./components/Login";
import Home from "./components/Home";
import Timetable from "./components/Timetable";
import TimeSlot from './components/TimeSlot';
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/login", element: <Login /> },
  { path: "/timetable/:timetableID", element: <Timetable /> },
  { path: "/timetable/:timetableID/:timeslotID", element: <TimeSlot /> },
]);

function App() {
  const [username, setUsername] = React.useState("");
  const [token, setToken] = React.useState("");
  return (
    <UsernameContext.Provider
      value={{ username, setUsername, token, setToken }}
    >
      <RouterProvider router={router} />
    </UsernameContext.Provider>
  );
}

export default App;