import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";

const ApplicationIntro = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-one-half">
                <h1 className="govuk-heading-l">
                    {t("dnsApplications:page-title")}
                </h1>
                <p className="govuk-body">
                    {t("dnsApplications:page-intro-paragraph-1")}
                </p>
                <ul className="govuk-list govuk-list--bullet">
                    <li> {t("dnsApplications:page-intro-list-item-1")}</li>

                    <li> {t("dnsApplications:page-intro-list-item-2")}</li>

                    <li> {t("dnsApplications:page-intro-list-item-3")}</li>
                </ul>
                <p className="govuk-body">
                    {t("dnsApplications:page-intro-paragraph-2")}{" "}
                    <Link href="/dns/calendar" className="govuk-link">

                        {t("dnsApplications:page-intro-paragraph-2-link")}

                    </Link>
                    .
                </p>
            </div>
            <div className="govuk-grid-column-one-half">
                <div className="map-responsive halfWidth">
                    <iframe
                        width="600"
                        height="500"
                        id="gmap_canvas"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d906124.6839968044!2d-4.849068013831224!3d52.39943863518503!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x486434b66c1c0fed%3A0x1ebb71bc8aa5e8a2!2sWales!5e0!3m2!1sen!2suk!4v1628587620670!5m2!1sen!2suk"
                        frameBorder="0"
                        scrolling="no"
                        marginHeight="0"
                        marginWidth="0"
                    ></iframe>
                </div>
            </div>
        </div>
    );
};

export default ApplicationIntro;