import {Link, useNavigate} from "react-router-dom";
import {Box, Button, Typography, useMediaQuery, useTheme} from "@mui/material";
import {ReactComponent as TemplateIcon} from "@/assets/quiz-templates/template.svg";
import {createQuiz, resetEditConfig} from "@root/quizes/actions";
import React from "react";

export default function CreateButtons ({mt}: string) {
    const navigate = useNavigate();
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(500));

    return(
        <Box
            sx={{
                display: "flex",
                gap: "20px",
                flexWrap: "wrap",
                marginTop: mt,
            }}
        >
            <Link to="/gallery" style={{ textDecoration: "none" }}>
                <Button
                    sx={{
                        display: "flex",
                        gap: "10px",
                        padding: "13px",
                        borderRadius: "8px",
                        background: "#9A9AAF17",
                        color: theme.palette.brightPurple.main,
                        transition: ".2s",
                        "&:hover": {
                            color: theme.palette.background.paper,
                            background: theme.palette.brightPurple.main,
                            "& svg path": { stroke: theme.palette.background.paper },
                        },
                    }}
                >
                    <TemplateIcon />
                    {!isMobile && <Typography>Посмотреть шаблоны</Typography>}
                </Button>
            </Link>
            <Button
                variant="contained"
                sx={{
                    padding: isMobile ? "10px" : "10px 47px",
                    minWidth: "44px",
                }}
                onClick={() => {
                    resetEditConfig();
                    createQuiz(navigate);
                }}
                data-cy="create-quiz"
            >
                {isMobile ? "+" : "Создать +"}
            </Button>
        </Box>
    )
}