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

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

import Stepper from "@ui_kit/Stepper";
import { useTranslation } from "react-i18next";

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

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

  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 }}>
              {t("Step")} {stepNumber} {t("of")} {questionsAmount}
            </Typography>
            <Stepper
              activeStep={stepNumber}
              steps={questionsAmount}
            />
          </Box>
        )}
        {prevButton}
        {nextButton}
      </Box>
    </Box>
  );
};