import useTranslation from "next-translate/useTranslation"
import Link from "next/link"

import type { FooterProps } from "./Footer"
import { Footer } from "./Footer"
import { Header } from "./Header"

export interface ErrorPageProps extends FooterProps {
  statusCode: number
  message: string
}

export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
  const { message, statusCode, version } = props
  const { t } = useTranslation()

  return (
    <>
      <div className="flex h-screen flex-col pt-0">
        <Header />
        <main className="flex min-w-full flex-1 flex-col items-center justify-center">
          <h1 className="my-6 text-4xl font-semibold">
            {t("errors:error")}{" "}
            <span
              className="text-green-800 dark:text-green-400"
              data-cy="status-code"
            >
              {statusCode}
            </span>
          </h1>
          <p className="text-center text-lg">
            {message}{" "}
            <Link
              href="/"
              className="text-green-800 hover:underline dark:text-green-400"
            >
              {t("errors:return-to-home-page")}
            </Link>
          </p>
        </main>
        <Footer version={version} />
      </div>
    </>
  )
}