import { CssBaseline, ThemeProvider } from "@mui/material";
import { styled } from "@mui/material/styles";
import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
import FirstQuiz from "./components/FirstQuiz";
import MyQuizzes from "./components/MyQuizzes";
import Navbar from "./components/Navbar/Navbar";
import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
import QuizGallery from "./components/QuizGallery";
import lightTheme from "./utils/themes/light";

const Divider = styled("div")(() => ({
    height: "30px",
    backgroundColor: "black",
}));

function App() {

    return (
        <ThemeProvider theme={lightTheme}>
            <CssBaseline />
            <Navbar isLoggedIn={true} />
            <FirstQuiz />
            <Divider />

            <MyQuizzes />
            <Divider />

            <QuizGallery />
            <Divider />
            
            <NavbarCreateQuiz />
            <CreateQuiz />
        </ThemeProvider>
    );
}

export default App;