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-form-group">
                    <label className="govuk-label-s " htmlFor="sort">
                        Show{" "}
                        <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>{" "}
                        Entries
                    </label>
                </div>
            </div>
            <div className="govuk-grid-row">
                <p className="govuk-body-s">Showing 1 to 10 of 54 entries</p>
            </div>
            <div className="govuk-grid-row ">
                <div className="govuk-grid-column-full govuk-!-padding-left-0 govuk-!-padding-right-0">
                    <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-14 results_wider  govuk-!-padding-left-2">
                                Reference
                            </dd>
                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                Application
                            </dd>
                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                Developer{" "}
                            </dd>
                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                Type
                            </dd>
                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
                                Status
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                <span className="results-visually-hidden">
                                    Reference:
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <a href="/application-view">
                                    <span className="results-visually-hidden">
                                        Application:{" "}
                                    </span>
                                    TWA - Morlais Demonstration Zone
                                </a>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Developer:
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Type:
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Status:
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                <span className="results-visually-hidden">
                                    Reference:
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <a href="/application-view">
                                    <span className="results-visually-hidden">
                                        Application:{" "}
                                    </span>
                                    TWA - Morlais Demonstration Zone
                                </a>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Developer:
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Type:
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Status:
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                <span className="results-visually-hidden">
                                    Reference:
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <a href="/application-view">
                                    <span className="results-visually-hidden">
                                        Application:{" "}
                                    </span>
                                    TWA - Morlais Demonstration Zone
                                </a>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Developer:
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Type:
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Status:
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                <span className="results-visually-hidden">
                                    Reference:
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <a href="/application-view">
                                    <span className="results-visually-hidden">
                                        Application:{" "}
                                    </span>
                                    TWA - Morlais Demonstration Zone
                                </a>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Developer:
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Type:
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Status:
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                <span className="results-visually-hidden">
                                    Reference:
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <a href="/application-view">
                                    <span className="results-visually-hidden">
                                        Application:{" "}
                                    </span>
                                    TWA - Morlais Demonstration Zone
                                </a>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Developer:
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Type:
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Status:
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                <span className="results-visually-hidden">
                                    Reference:
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <a href="/application-view">
                                    <span className="results-visually-hidden">
                                        Application:{" "}
                                    </span>
                                    TWA - Morlais Demonstration Zone
                                </a>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Developer:
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Type:
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Status:
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                <span className="results-visually-hidden">
                                    Reference:
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <a href="/application-view">
                                    <span className="results-visually-hidden">
                                        Application:{" "}
                                    </span>
                                    TWA - Morlais Demonstration Zone
                                </a>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Developer:
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Type:
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Status:
                                </span>
                                Recommendation
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                <span className="results-visually-hidden">
                                    Reference:
                                </span>
                                CAS-00009-W8N6W4
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <a href="/application-view">
                                    <span className="results-visually-hidden">
                                        Application:{" "}
                                    </span>
                                    TWA - Morlais Demonstration Zone
                                </a>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Developer:
                                </span>
                                Menter Mon
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Type:
                                </span>
                                Energy
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
                                <span className="results-visually-hidden">
                                    Status:
                                </span>
                                Recommendation
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
            <div className="govuk-grid-row ">
                <p>
                    Previous <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="#">Next</Link>
                </p>
            </div>
        </>
    );
};

export default ApplicationList;