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

export default function Login() {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    return (
        <div className="card" id="login-card">
            <div className="card-body active">
                <h3 className="heading-small card-heading">
                    {t("home:login-card-title")}
                </h3>

                <form action="/myportal" method="POST" id="loginForm">
                    <div className="govuk-form-group">
                        {" "}
                        <label
                            htmlFor="user_id"
                            className="govuk-label"
                            aria-describedby="user_id-hint"
                        >
                            {t("home:login-card-id-label")}
                        </label>
                        <div className="govuk-hint" id="user_id-hint">
                            {t("home:login-card-id-hint")}
                        </div>
                        <input
                            type="text"
                            name="user_id"
                            id="user_id"
                            className="govuk-input govuk-!-width-one-half"
                            maxLength="22"
                            aria-describedby="user_id-hint"
                            autoComplete="username"
                        />
                    </div>
                    <div className="govuk-form-group">
                        {" "}
                        <label htmlFor="password" className="govuk-label">
                            {t("home:login-card-password-label")}
                        </label>
                        <input
                            type="password"
                            name="password"
                            id="password"
                            className="govuk-input govuk-!-width-three-quarters"
                            autoComplete="current-password"
                        />
                    </div>
                    <div className="govuk-form-group">
                        {/* <button
              type="submit"
              className="govuk-button"
              data-module="govuk-button"
              id="continue"
              formnovalidate=""
            >
              {t("home:login-card-button")}
            </button> */}
                        <Link href="/myportal">
                            <a className="govuk-button">
                                {t("home:login-card-button")}
                            </a>
                        </Link>
                    </div>
                </form>
                <div className="govuk-form-group govuk-!-margin-top-4">
                    <p className="govuk-body-s">
                        {t("home:login-card-register-label")}{" "}
                        <Link href="/account/register">
                            <a>{t("home:login-card-register-link")}</a>
                        </Link>
                    </p>
                    <p className="govuk-body-s">
                        <Link href="/">
                            <a>{t("home:login-card-forgotten-label")} </a>
                        </Link>
                    </p>
                </div>
            </div>
        </div>
    );
}