import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";

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

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

    return (
        <>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h3 className="govuk-heading-s">About this application</h3>
                    <p className="govuk-body-s">
                        The Project will provide a consented area for the
                        installation and commercial demonstration of multiple
                        arrays of tidal energy devices, to a maximum installed
                        capacity of 240 Megawatts (MW).
                    </p>
                </div>
            </div>
            <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h3 className="govuk-heading-s">Application location</h3>
                    <div className="map-responsive ">
                        <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>
                    <p className="govuk-body-s govuk-!-margin-top-3">
                        The location shown on the map is approximate at this
                        stage
                    </p>
                </div>
            </div>
            <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h3 className="govuk-heading-s">Contact Information</h3>
                    <p className="govuk-body-s">
                        Planning Inspectorate case team:
                        <br />
                        <a
                            className="longLinkBreak"
                            href="mailto:TWA.morlaistidalarray@planninginspectorate.gov.uk"
                        >
                            TWA.morlaistidalarray@planninginspectorate.gov.uk
                        </a>
                    </p>
                    <p className="govuk-body-s">
                        Tel: <a href="tel:03034445940">0303 444 5940</a>
                    </p>
                    <p className="govuk-body-s">
                        Developer: <br />
                        Graham Morley
                        <br />
                        Tel: +44 (0) 1248 725 713
                    </p>
                </div>
            </div>
            <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h3 className="govuk-heading-s">Email updates</h3>
                    <p className="govuk-body-s govuk-!-margin-bottom-0">
                        Sign up using email address to receive updates about
                        this application
                    </p>
                    <form>
                        <div className="govuk-form-group govuk-!-margin-bottom-2">
                            <br />
                            <input
                                className="govuk-input govuk-input--width-10 "
                                id="event-name"
                                name="event-name"
                                type="text"
                                placeholder="Email address"
                            />
                        </div>
                        <div className="govuk-form-group govuk-!-margin-top-0 govuk-!-margin-bottom-0">
                            <button
                                className="govuk-button "
                                data-module="govuk-button"
                            >
                                Sign up
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </>
    );
};

export default ApplicationSideBar;