import React from "react";
import { Container } from "./style";
import ErrorImage from "./errorPage.png";
import ButtonComponent from "../button";
import { useNavigate, useRouteError } from "react-router-dom";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const Index = () => {
  const { findText } = useTranslation(wordStore);
  // const data = useContext(OutletContext);
  const navigate = useNavigate();
  const error = useRouteError();
  //console.log(error, 'errorStat');
  // useLayoutEffect(() => {
  //     data.setRightLayout(false);
  //     data.setLeftLayout(false)
  //   }, []);

  return (
    <Container>
      {error?.status === 404 ? (
        <>
          <div className="right">
            <h3>{findText("Opss...")}</h3>
            <h2>{findText("Page not found")}</h2>
            <p>
              {findText(
                "Seems we can't find the page you are looking for. Let's get you back home.",
              )}
            </p>
            <ButtonComponent
              text={findText("Go Back")}
              styles={{
                width: "144px",
                height: "50px",
                background: "#FEBF10",
                fontWeight: 700,
                fontSize: "16px",
                lineHeight: "22px",
                marginTop: "20px",
                boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
              }}
              onClick={() => navigate(-1)}
            />
          </div>

          <div className="left">
            <img src={ErrorImage} alt="" />
          </div>
        </>
      ) : (
        <>
          <div className="right">
            <h3>{findText("Opss...")}</h3>
            <p>{findText("There was an error")}</p>
            <ButtonComponent
              text={findText("Go Back")}
              styles={{
                width: "144px",
                height: "50px",
                background: "#FEBF10",
                fontWeight: 700,
                fontSize: "16px",
                lineHeight: "22px",
                marginTop: "20px",
                boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
              }}
              onClick={() => navigate(-1)}
            />
          </div>
        </>
      )}
    </Container>
  );
};
export default Index;
