import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import lightTheme from "./utils/themes/light";
import { ThemeProvider } from '@mui/material';
import CreateQuiz from './components/CreateQuiz/CreateQuiz';
import NavbarCreateQuiz from './components/Navbar/NavbarCreateQuiz';
import darkTheme from "./utils/themes/dark";

import HorizontalLinearStepper from './ui_kit/Stepper';
import Create from './pages/createQuize/Create';
import Quizes from './pages/createQuize/Quizes';
import Projects from './pages/createQuize/Projects';
import Gallery from './pages/createQuize/Gallery';
import StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main"
import FirstQuiz from "./pages/startPage/FirstQuiz";
import QuestionsPage from "./pages/Questions/QuestionsPage";

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>

        </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/></>} />