import { CssBaseline } from "@mui/material";
import { styled } from "@mui/material/styles";
import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
import FirstQuiz from "./pages/createQuize/FirstQuiz";
import MyQuizzes from "./pages/createQuize/MyQuizzes";
import Navbar from "@ui_kit/Header/Navbar";
import NavbarCreateQuiz from "@ui_kit/Header/NavbarCreateQuiz";
import QuizGallery from "./pages/createQuize/QuizGallery";
import lightTheme from "./utils/themes/light";
import darkTheme from "./utils/themes/dark";

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

function App() {
  return (
    <>
      <CssBaseline />
      <Navbar isLoggedIn={true} />
      <FirstQuiz />
      <Divider />

      <MyQuizzes />
      <Divider />

      <QuizGallery />
      <Divider />

      <NavbarCreateQuiz />
      <CreateQuiz />
    </>
  );
}

export default App;