import {Link, useParams} from "react-router-dom";
import {Box, Button, useTheme} from "@mui/material";
import CreationFullCard from "./CreationFullCard";

import Info from "../../assets/icons/Info";

import image from "../../assets/Rectangle 110.png";
import {quizStore} from "@root/quizes";

export const Result = () => {
    const {listQuizes, updateQuizesList} = quizStore();
    const params = Number(useParams().quizId);
    const handleNext = () => {
        updateQuizesList(params, {step: listQuizes[params].step + 1})
    }
  const theme = useTheme();
  return (
    <Box component="section">
      <CreationFullCard
        text="Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке."
        text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
        image={image}
      />
      <Box sx={{ mt: "30px", alignItems: "center" }}>
          <Button
            variant="contained"
            sx={{
              mr: "23px",
              minWidth: "258px",
            }}
            onClick={handleNext}
          >
            Создать результаты
          </Button>

        <Info />
      </Box>
    </Box>
  );
};