import { useQuizStore } from "@/stores/useQuizStore";
import { Button, Skeleton } from "@mui/material";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useTranslation } from "react-i18next";

interface Props {
  isNextButtonEnabled: boolean;
  moveToNextQuestion: () => void;
}

export default function NextButton({ isNextButtonEnabled, moveToNextQuestion }: Props) {
  const { settings, nextLoading } = useQuizStore();
  const { t, i18n } = useTranslation();

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

  return nextLoading ? (
    <Skeleton
      variant="rectangular"
      sx={{
        borderRadius: "8px",
        width: "96px",
        height: "44px",
      }}
    />
  ) : (
    <Button
      disabled={!isNextButtonEnabled}
      variant="contained"
      sx={{
        fontSize: "16px",
        padding: "10px 15px",
        "&:disabled": {
          background: quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#FFFFFF26",
        },
      }}
      onClick={moveToNextQuestion}
    >
      {`${t("Next")} →`}
    </Button>
  );
}