import Link from "next/link";
import Header from "./header";
import Banner from "./breadcrumbs";
import Breadcrumbs from "./banner";
import Footer from "./footer";

const Errorpage = () => {
  var m = new Date();
  var dateString =
    m.getUTCDate() +
    "/" +
    (m.getUTCMonth() + 1) +
    "/" +
    m.getUTCFullYear() +
    " " +
    m.getUTCHours() +
    ":" +
    m.getUTCMinutes() +
    ":" +
    m.getUTCSeconds();

  return (
    <div className="">
      <Header courseName="An error has occured" />
      <div className="govuk-width-container">
        <main
          className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
          id="main-content"
          role="main"
        >
          <div className="govuk-grid-row">
            <div className="govuk-grid-column-two-thirds">
              <h1 className="govuk-heading-xl">There has been a problem</h1>
              <p className="govuk-body">
                Unfortunately something has gone wrong!
              </p>
              <p className="govuk-body govuk-!-margin-top-9">{dateString}</p>
              <Link href="/">
                <a
                  role="button"
                  draggable="false"
                  className="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
                  data-module="govuk-button"
                >
                  Try again
                </a>
              </Link>
              <br />
            </div>
          </div>
        </main>
      </div>
      <Footer footerLinks="" />
    </div>
  );
};

export default Errorpage;