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

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

    dnsList = dnsList.value;
    let dnsListArr = dnsList.slice(0, 3);
    const router = useRouter();
    const { locale } = router;

    return (
        <div className="govuk-panel govuk-grid-column-one-third govuk-panel--latest">
            <h2 className="govuk-heading-m">
                {" "}
                {t("dnsHome:latest-applications-title")}
            </h2>
            <div className="govuk-panel__body">
                <ul className="govuk-list">
                    {Object.keys(dnsListArr).map((key, index) => {
                        return (
                            <li className="govuk-body-s " key={key}>
                                <Link
                                    href={
                                        "/dns/" +
                                        (dnsList[key].title.indexOf(" - ") < 0
                                            ? dnsList[key].title
                                            : dnsList[key].title
                                                  .split(" - ")[1]
                                                  .split(" ")
                                                  .join("-"))
                                    }
                                >
                                    {dnsList[key].title}
                                </Link>
                            </li>
                        );
                    })}
                </ul>
            </div>
        </div>
    );
};

export default LatestApplications;