import { Button, Typography } from "@mui/material";
import SectionWrapper from "@ui_kit/SectionWrapper";
import ComplexNavText from "./ComplexNavText";
import { createQuiz } from "@root/quizes/actions";
import { useNavigate } from "react-router-dom";


export default function FirstQuiz() {
    const navigate = useNavigate();

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "25px",
                mb: "70px",
            }}
        >
            <ComplexNavText text1="Кабинет квизов" />
            <Typography
                variant="h4"
                sx={{
                    mt: "20px",
                    mb: "30px",
                }}
            >
                Создайте свой первый квиз
            </Typography>
            <Button
                variant="contained"
                data-cy="create-quiz"
                onClick={() => createQuiz(navigate)}
            >
                Создать +
            </Button>
        </SectionWrapper>
    );
}
