import { Button, useTheme } from "@mui/material";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizStore } from "@/stores/useQuizStore";
import { useTranslation } from "react-i18next";

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

export default function PrevButton({ isPreviousButtonEnabled, moveToPrevQuestion }: Props) {
  const theme = useTheme();
  const { settings } = useQuizStore();
  const isMobileMini = useRootContainerSize() < 382;
  const { t, i18n } = useTranslation();

  // Диагностика i18n в PrevButton
  console.log("🔍 PrevButton: useTranslation called");
  console.log("🔍 PrevButton: i18n instance:", i18n);
  console.log("🔍 PrevButton: i18n.isInitialized:", i18n.isInitialized);
  console.log("🔍 PrevButton: i18n.language:", i18n.language);
  console.log("🔍 PrevButton: Testing translation:");
  console.log("🔍 PrevButton: t('Prev'):", t("Prev"));

  return (
    <Button
      disabled={!isPreviousButtonEnabled}
      variant="contained"
      sx={{
        ml: "auto",
        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 ? "←" : `← ${t("Prev")}`}
    </Button>
  );
}