import { Typography, useTheme, Box } from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import CustomButton from "./CustomButton";
import ExpandableQuizBlock from "./ExpandableQuizBlock";
import QuizCard from "./QuizCard";
import SectionWrapper from "./SectionWrapper";


export default function MyQuizzes() {
    const theme = useTheme();

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "25px",
                mb: "70px",
            }}
        >
            <ComplexNavText text1="Кабинет квизов" />
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    mt: "20px",
                    mb: "30px",
                }}
            >
                <Typography variant="h4">Мои квизы</Typography>
                <CustomButton
                    variant="contained"
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main
                    }}
                >Создать +</CustomButton>
            </Box>
            <Box
                sx={{
                    py: "10px",
                    display: "flex",
                    flexWrap: "wrap",
                    gap: "40px",
                    mb: "60px",
                }}
            >
                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0} />
                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0} />
            </Box>
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    gap: "40px",
                }}
            >
                <ExpandableQuizBlock name="Название" />
                <ExpandableQuizBlock name="Название" />
            </Box>
        </SectionWrapper>
    );
}