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

export default function ServiceBanner(props) {
    let { t, lang } = useTranslation();

    const signInButton = () => {
        router.push(
            `${
                router.locale == "cy" ? "/awd/mewngofnodi" : "/auth/signin"
            }?callbackUrl=${encodeURIComponent(
                window.location.href
            )}&error=EmailSignin`
        );
    };
    return (
        <div className="servicebanner">
            <h1>
                <img
                    className={
                        router.locale == "cy"
                            ? "govuk-!-margin-top-4 serviceTitle cy"
                            : "govuk-!-margin-top-4 serviceTitle"
                    }
                    src={
                        router.locale == "cy"
                            ? "/assets/images/planning-casework-cy.svg"
                            : "/assets/images/planning-casework-en.svg"
                    }
                    alt="Planning casework"
                />
            </h1>
            {props.noSignin != true && (
                <div className="serviceBanner_userDetails">
                    <button
                        onClick={() => signInButton()}
                        className="govuk-header__link "
                    >
                        {t("common:signin-label")}
                    </button>
                </div>
            )}
        </div>
    );
}