import styles from "./Error.module.scss";

import React from "react";
import Head from "next/head";
import { useTranslation } from "next-i18next";

import AppTemplate from "../../templates/app";
import Footer from "../../organisms/footer";
import Header from "../../organisms/header";
import Error from "../../organisms/error";
import AppContext from "../../particles/contexts/app-context";

const getText = (statusCode: string | number, t: any) => {
  if (statusCode == 404) {
    return t("Page not found");
  }

  if (statusCode == 500) {
    return t("Internal server error");
  }

  return t("An error has occurred");
};

interface Props {
  statusCode: string;
  appData: any;
}

const ErrorPage = ({ statusCode, appData }: Props) => {
  const { t } = useTranslation("common");

  return (
    <AppContext.Provider value={appData}>
      <AppTemplate header={<Header />} footer={<Footer />}>
        <Head>
          <title>BASS</title>
        </Head>

        <main className={styles.main}>
          <Error number={statusCode} text={getText("Page not found", t)} />
        </main>
      </AppTemplate>
    </AppContext.Provider>
  );
};

export default ErrorPage;