import { Box, Button } from "@mui/material";
import { decrementCurrentStep } from "@root/quizes/actions";
import ArrowLeft from "@/assets/icons/questionsPage/arrowLeft";
import QuizInstallationCard from "./QuizInstallationCard/QuizInstallationCard";
import QuizLinkCard from "./QuizLinkCard";
import { useNavigate } from "react-router-dom";

export default function InstallQuiz() {
  const navigate = useNavigate();
  return (
    <>
      <Box
        sx={{
          marginTop: "60px",
          display: "flex",
          gap: "40px",
          flexDirection: "column",
        }}
      >
        <QuizLinkCard />
        <QuizInstallationCard />
        <Box
          sx={{
            display: "flex",
            gap: "8px",
            justifyContent: "end",
            mt: "30px",
            mr: "60px",
          }}
        >
          <Button
            variant="outlined"
            sx={{ padding: "10px 20px", borderRadius: "8px" }}
            onClick={decrementCurrentStep}
          >
            <ArrowLeft />
          </Button>
          <Button
            variant="contained"
            sx={{ padding: "10px 20px", borderRadius: "8px" }}
            onClick={() => navigate("/list")}
          >На главную</Button>
        </Box>
      </Box>
    </>
  );
}
