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

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

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

    return (
        <>
            <div className="govuk-grid-row govuk-!-margin-top-9">
                <div className="govuk-grid-column-full">
                    <div className="govuk-form-group">
                        <label className="govuk-label-s " htmlFor="sort">
                            {t("dnsCommon:result-list-show-label")}{" "}
                            <select
                                className="govuk-select"
                                id="showNo"
                                name="showNo"
                            >
                                <option value="1">10</option>
                                <option value="1">25</option>
                                <option value="1">50</option>
                                <option value="1">100</option>
                            </select>{" "}
                            {t("dnsCommon:result-list-entries-label")}
                        </label>
                    </div>
                </div>
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <p className="govuk-body-s">
                        {t("dnsCommon:result-list-showing-label", {
                            recordIndex: "1",
                            pagingIndex: "10",
                            totalRecords: "55",
                        })}
                    </p>
                </div>
            </div>
            <div className="govuk-grid-row ">
                <div className="govuk-grid-column-full">
                    <dl className="govuk-summary-list  govuk-!-margin-bottom-0 results">
                        <div className="govuk-summary-list__row results-headings">
                            <dd className="govuk-summary-list__key govuk-!-font-size-16 results_wider  ">
                                {t(
                                    "dnsApplications:result-list-heading-label-reference"
                                )}
                            </dd>
                            <dd className="govuk-summary-list__key govuk-!-font-size-16">
                                {t(
                                    "dnsApplications:result-list-heading-label-application"
                                )}
                            </dd>
                            <dd className="govuk-summary-list__key govuk-!-font-size-16">
                                {t(
                                    "dnsApplications:result-list-heading-label-developer"
                                )}
                            </dd>
                            <dd className="govuk-summary-list__key govuk-!-font-size-16">
                                {t(
                                    "dnsApplications:result-list-heading-label-type"
                                )}
                            </dd>
                            <dd className="govuk-summary-list__key govuk-!-font-size-16">
                                {t(
                                    "dnsApplications:result-list-heading-label-status"
                                )}
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-reference"
                                    )}
                                    :
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
                                    <a>
                                        <span className="results-visually-hidden">
                                            {t(
                                                "dnsApplications:result-list-heading-label-application"
                                            )}
                                            :{" "}
                                        </span>
                                        TWA - Morlais Demonstration Zone
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-developer"
                                    )}
                                    :
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-type"
                                    )}
                                    :
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-status"
                                    )}
                                    :
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-reference"
                                    )}
                                    :
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
                                    <a>
                                        <span className="results-visually-hidden">
                                            {t(
                                                "dnsApplications:result-list-heading-label-application"
                                            )}
                                            :{" "}
                                        </span>
                                        TWA - Morlais Demonstration Zone
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-developer"
                                    )}
                                    :
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-type"
                                    )}
                                    :
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-status"
                                    )}
                                    :
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-reference"
                                    )}
                                    :
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
                                    <a>
                                        <span className="results-visually-hidden">
                                            {t(
                                                "dnsApplications:result-list-heading-label-application"
                                            )}
                                            :{" "}
                                        </span>
                                        TWA - Morlais Demonstration Zone
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-developer"
                                    )}
                                    :
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-type"
                                    )}
                                    :
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-status"
                                    )}
                                    :
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-reference"
                                    )}
                                    :
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
                                    <a>
                                        <span className="results-visually-hidden">
                                            {t(
                                                "dnsApplications:result-list-heading-label-application"
                                            )}
                                            :{" "}
                                        </span>
                                        TWA - Morlais Demonstration Zone
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-developer"
                                    )}
                                    :
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-type"
                                    )}
                                    :
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-status"
                                    )}
                                    :
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-reference"
                                    )}
                                    :
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
                                    <a>
                                        <span className="results-visually-hidden">
                                            {t(
                                                "dnsApplications:result-list-heading-label-application"
                                            )}
                                            :{" "}
                                        </span>
                                        TWA - Morlais Demonstration Zone
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-developer"
                                    )}
                                    :
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-type"
                                    )}
                                    :
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-status"
                                    )}
                                    :
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-reference"
                                    )}
                                    :
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
                                    <a>
                                        <span className="results-visually-hidden">
                                            {t(
                                                "dnsApplications:result-list-heading-label-application"
                                            )}
                                            :{" "}
                                        </span>
                                        TWA - Morlais Demonstration Zone
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-developer"
                                    )}
                                    :
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-type"
                                    )}
                                    :
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-status"
                                    )}
                                    :
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-reference"
                                    )}
                                    :
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
                                    <a>
                                        <span className="results-visually-hidden">
                                            {t(
                                                "dnsApplications:result-list-heading-label-application"
                                            )}
                                            :{" "}
                                        </span>
                                        TWA - Morlais Demonstration Zone
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-developer"
                                    )}
                                    :
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-type"
                                    )}
                                    :
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-status"
                                    )}
                                    :
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-reference"
                                    )}
                                    :
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
                                    <a>
                                        <span className="results-visually-hidden">
                                            {t(
                                                "dnsApplications:result-list-heading-label-application"
                                            )}
                                            :{" "}
                                        </span>
                                        TWA - Morlais Demonstration Zone
                                    </a>
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-developer"
                                    )}
                                    :
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-type"
                                    )}
                                    :
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <span className="results-visually-hidden">
                                    {t(
                                        "dnsApplications:result-list-heading-label-status"
                                    )}
                                    :
                                </span>
                                Recommendation
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
            <div className="govuk-grid-row ">
                <div className="govuk-grid-column-full">
                    <p>
                        {t("dnsCommon:result-list-previous-label")}{" "}
                        <span>1</span>{" "}
                        <span>
                            <Link href="#">2</Link>
                        </span>{" "}
                        <span>
                            <Link href="#">3</Link>
                        </span>{" "}
                        <span>
                            <Link href="#">4</Link>
                        </span>{" "}
                        <span>
                            <Link href="#">5</Link>
                        </span>{" "}
                        <Link href="#">
                            {t("dnsCommon:result-list-next-label")}
                        </Link>
                    </p>
                </div>
            </div>
        </>
    );
};

export default ApplicationList;