import Link from "next/link";
import Footer from "./footer";
import Header from "./header";

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="/"
                                role="button"
                                draggable="false"
                                className="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
                                data-module="govuk-button"
                            >
                                Try again
                            </Link>
                            <br />
                        </div>
                    </div>
                </main>
            </div>
            <Footer footerLinks="" />
        </div>
    );
};

export default Errorpage;