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

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 id="dns-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"
                        }
                        // onClick={() => {
                        //     spinnerState();
                        // }}
                        className="govuk-button withChevron govuk-button-cta"
                    >
                        {t("home:dns-card-button")}
                    </Link>
                </div>
                <div className="govuk-form-group">
                    <h3 className="heading-small card-heading">
                        {t("home:contact-us-heading")}
                    </h3>
                    <div className="govuk-form-group">
                        <p className="govuk-body-s">
                            {t("home:contact-us-paragraph")}
                        </p>
                    </div>
                    <div className="govuk-form-group">
                        <Link
                            href={
                                router.locale == "cy"
                                    ? "/cyswllt"
                                    : "/contactus"
                            }
                            className="govuk-button   govuk-button--secondary-cta"
                        >
                            {t("home:contact-us-button")}
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}