import { Box, Typography, Button, useTheme } from "@mui/material";
import { Graph } from "./graph";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";

export const QuestionsMap = () => {
  const theme = useTheme();

  return (
    <Box>
      <Typography variant="h5" sx={{ marginTop: "50px" }}>
        Карта вопросов
      </Typography>
      <Graph />
      <Box sx={{ display: "flex", gap: "8px", marginTop: "25px" }}>
        <Button
          variant="outlined"
          sx={{
            padding: "10px 20px",
            borderRadius: "8px",
            height: "44px",
            marginLeft: "auto",
          }}
          onClick={decrementCurrentStep}
        >
          <ArrowLeft />
        </Button>
        <Button
          variant="contained"
          sx={{
            height: "44px",
            padding: "10px 20px",
            borderRadius: "8px",
            background: theme.palette.brightPurple.main,
            fontSize: "18px",
          }}
          onClick={incrementCurrentStep}
        >
          Следующий шаг
        </Button>
      </Box>
    </Box>
  );
};
