import { useRouteError } from "react-router-dom";
import { useTranslation } from "react-i18next";

function ErrorBoundary() {
  let error = useRouteError();
  const { t } = useTranslation();
  console.log(error);
  // Uncaught ReferenceError: path is not defined
  return (
    <div style={{ padding: 16 }}>
      <h1 style={{ color: "#a4a4a4", margin: "5px 0px" }}>:) OHH FUCKING YES!!!</h1>
      <p>LeonPan发生了一些意想不到的错误</p>
      <p>
        请反馈到<a href="http://leonmmcoset.jjxmm.win:2000/leonmmcoset/leonpan-assets/issues">LeonGit Issues</a>
      </p>
      <h2 style={{ margin: "15px 0px" }}>{t("common:renderError")}</h2>
      {!!error && (
        <details>
          <summary>{t("common:errorDetails")}</summary>
          <pre>
            <code>{error.toString()}</code>
          </pre>
          {error.stack && (
            <pre>
              <code>{error.stack}</code>
            </pre>
          )}
        </details>
      )}
      <hr />
      <p>前端又要忙活了（</p>
    </div>
  );
}

export default ErrorBoundary;
