import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "@mui/material";

import { Setting } from "./pages/Setting";

import StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main";
import FirstQuiz from "./pages/startPage/FirstQuiz";
import QuestionsPage from "./pages/Questions/QuestionsPage";
import { Result } from "./pages/Result/Result";

import lightTheme from "./utils/themes/light";

import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <ThemeProvider theme={lightTheme}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Main />}>
            <Route path="/start" element={<FirstQuiz />} />
            <Route path="/create" element={<StartPage />} />
            <Route path="/questions" element={<QuestionsPage />} />
            <Route path="/result" element={<Result />} />
            <Route path="/settings" element={<Setting />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>
);

// <Route path="/quizes" element={<Quizes/>}/>
// <Route path="/projects" element={<Projects/>}  />
// <Route path="/gallery" element={<Gallery/>} />
// <Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
// <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
// <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />