import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import LoadingOverlay from "react-loading-overlay";

export default function Dns() {
    let { t } = useTranslation();
    const [showSpinnerState, setShowSpinnerState] = useState(false);

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

    let spinnerState = () => {
        showSpinnerState == true
            ? setShowSpinnerState(false)
            : setShowSpinnerState(true);
    };
    return (
        <div className="card" id="casesearch-card">
            <div className="card-body">
                <h3 className="heading-small card-heading">
                    {t("home:dns-card-title")}
                </h3>
                <div className="govuk-form-group">
                    <p className="govuk-body-s">
                        {t("home:dns-card-paragraph")}
                    </p>
                </div>
                <div className="govuk-form-group">
                    <Link
                        href={
                            router.locale == "cy"
                                ? "/ceisiadaudns"
                                : "/dnsapplications"
                        }
                    >
                        <a
                            className="govuk-button"
                            onClick={() => {
                                spinnerState();
                            }}
                        >
                            {t("home:dns-card-button")}
                        </a>
                    </Link>
                </div>
            </div>
            <LoadingOverlay
                active={showSpinnerState}
                spinner
                text={t("common:spinner-loading")}
            />
        </div>
    );
}