import { Box, Typography } from "@mui/material";
import { FallbackProps } from "react-error-boundary";
import { useTranslation } from "react-i18next";

type Props = Partial<FallbackProps>;

export const ApologyPage = ({ error }: Props) => {
  let message = error.message || error.response?.data;
  console.log("message");
  console.log(message.toLowerCase());
  const { t } = useTranslation();
  console.log("t");

  // Проверяем, что t функция существует
  if (t) {
    console.log(t(message.toLowerCase()));
  } else {
    console.log("Translation function is not available");
  }

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100%",
        backgroundColor: "#F2F3F7",
      }}
    >
      <Typography
        sx={{
          textAlign: "center",
          color: "text.primary",
        }}
      >
        {t ? t(message.toLowerCase()) : message}
      </Typography>
    </Box>
  );
};