import { ReactNode } from "react";
import { Box, Typography, useTheme } from "@mui/material";

import { useQuizData } from "@contexts/QuizDataContext";

import Stepper from "@ui_kit/Stepper";

type FooterProps = {
    stepNumber: number | null;
    nextButton: ReactNode;
    prevButton: ReactNode;
};

export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
    const theme = useTheme();
    const { questions, settings } = useQuizData();
    const questionsAmount = questions.filter(
        ({ type }) => type !== "result"
    ).length;

    return (
        <Box
            sx={{
                position: "relative",
                padding: "15px 0",
                borderTop: `1px solid #9A9AAF80`,
                height: "75px",
                display: "flex",
                background: settings.cfg.design
                    ? "rgba(154,154,175, 0.2)"
                    : "transparent",
            }}
        >
            <Box
                sx={{
                    width: "100%",
                    maxWidth: "1410px",
                    padding: "10px",
                    margin: "0 auto",
                    display: "flex",
                    alignItems: "center",
                    gap: "10px",
                }}
            >
                {stepNumber !== null && (
                    <Box sx={{ flexGrow: 1 }}>
                        <Typography sx={{ color: theme.palette.text.primary }}>
                            Вопрос {stepNumber} из {questionsAmount}
                        </Typography>
                        <Stepper activeStep={stepNumber} steps={questionsAmount} />
                    </Box>
                )}
                {prevButton}
                {nextButton}
            </Box>
        </Box>
    );
};