import {Button, useTheme} from "@mui/material";
import {useRootContainerSize} from "../../../contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@contexts/QuizDataContext";

interface Props{
    isPreviousButtonEnabled: boolean,
    moveToPrevQuestion: () => void,
}

export default function PrevButton ({isPreviousButtonEnabled, moveToPrevQuestion}: Props) {
    const theme = useTheme();
    const { settings } = useQuizData();
    const isMobileMini = useRootContainerSize() < 382;
    return(
        <Button
            disabled={!isPreviousButtonEnabled}
            variant="contained"
            sx={{
                fontSize: "16px",
                padding: "10px 15px",
                color: quizThemes[settings.cfg.theme].isLight ? theme.palette.primary.main : "#FFFFFF",
                border: quizThemes[settings.cfg.theme].isLight ? `1px solid ${theme.palette.primary.main}` : "1px solid #9A9AAF",
                background: quizThemes[settings.cfg.theme].isLight ? "#FFFFFF" : "#FFFFFF26",
                "&:hover": {
                    color: "#FFFFFF",
                    border: `1px solid ${theme.palette.primary.dark}`,
                },
                "&:disabled": {
                    background: quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#FFFFFF26"
                },
            }}
            onClick={moveToPrevQuestion}
        >
            {isMobileMini ? "←" : "← Назад"}
        </Button>
    )
}