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 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';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode>
        <ThemeProvider theme={lightTheme}>
    <BrowserRouter>
        <Routes>
          <Route path="/" element={ <App /> } />
          <Route path="/create" element={<Create/>} />
          <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/></>} />

        </Routes>
    </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>
);