import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import MobileStepper from "@mui/material/MobileStepper";
import { maxQuizSetupSteps, quizSetupSteps } from "@model/quizSettings";

interface Props {
    activeStep: number;
}

export default function ProgressMobileStepper({
    activeStep,
}: Props) {
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));

    return (
        <Box
            sx={{
                maxWidth: isTablet ? "800px" : "100%",
                display: "flex",
                justifyContent: "center",
                flexDirection: "column",
                height: "73px",
                borderRadius: "13px",
                border: "solid #7E2AEA 1px",
                padding: "0 0 20px 0",
                overflow: "hidden",
            }}
        >
            <MobileStepper
                variant="progress"
                steps={maxQuizSetupSteps}
                position="static"
                activeStep={activeStep}
                sx={{
                    width: "100%",
                    flexGrow: 1,
                    padding: "8px 0",
                    "& .MuiLinearProgress-root": {
                        height: "10px",
                        background: "#ffffff",
                        width: "100%",
                    },
                    "& .MuiLinearProgress-bar": {
                        background: "#7e2aea",
                    },
                }}
                nextButton={<></>}
                backButton={<></>}
            />
            <Box sx={{ padding: "3px 3px 3px 20px" }}>
                <Typography
                    sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}
                >
                    {" "}
                    Шаг {activeStep + 1 } из {maxQuizSetupSteps}
                </Typography>
                <Typography>{quizSetupSteps[activeStep].stepperText}</Typography>
            </Box>
        </Box>
    );
}