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 FirstQuiz from './components/FirstQuiz';
import lightTheme from "./utils/themes/light";
import { ThemeProvider } from '@mui/material';
import Navbar from './components/Navbar/Navbar';
import CreateQuiz from './components/CreateQuiz/CreateQuiz';
import NavbarCreateQuiz from './components/Navbar/NavbarCreateQuiz';
import MyQuizzes from './components/MyQuizzes';
import QuizGallery from './components/QuizGallery';

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={<><Navbar isLoggedIn={true} /><FirstQuiz/></>} />
          <Route path="/quizes" element={<><Navbar isLoggedIn={true} /></>}/>
          <Route path="/projects" element={<><Navbar isLoggedIn={true} /> <MyQuizzes /></>}  />
          <Route path="/gallery" element={<><Navbar isLoggedIn={true} /><QuizGallery /></>} />
          <Route path="/create/type" element={<><NavbarCreateQuiz /></>} />
          <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
          <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
        </Routes>
    </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>
);