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

const ServiceBanner = (props) => {
    props = props.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="govuk-!-margin-top-4"
        //             src={
        //                 router.locale == "cy"
        //                     ? "/assets/images/planning-casework-cy.svg"
        //                     : "/assets/images/planning-casework-en.svg"
        //             }
        //             alt="Planning casework"
        //         />
        //     </h1>
        //     <div className="serviceBanner_userDetails">
        //         <button
        //             onClick={() => signInButton()}
        //             className="govuk-header__link "
        //         >
        //             {t("common:signin-label")}
        //         </button>
        //     </div>
        // </div>

        <div className="servicebanner myportal govuk-!-margin-bottom-4">
            <h1>
                <img
                    src={
                        router.locale == "cy"
                            ? "/assets/images/planning-casework-cy.svg"
                            : "/assets/images/planning-casework-en.svg"
                    }
                    alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
                />
            </h1>

            <div className="serviceBanner_userDetails">
                <img
                    className="user_logo"
                    src="/assets/images/user.svg"
                    alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
                />{" "}
                <div className="serviceBanner_userDetails_name">
                    <Link
                        href="/account/personaldetails"
                        className="govuk-button-secondary"
                    >
                        {props.accountDetails.accountDetails.firstname}{" "}
                        {props.accountDetails.accountDetails.lastname}
                        {" - "}
                        {
                            props.accountDetails.accountDetails[
                                "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
                            ]
                        }
                    </Link>
                </div>
                <div>
                    <Link
                        href={router.locale == "cy" ? "/allgofnodi" : "/logout"}
                        onClick={() => {
                            handleLogout();
                        }}
                        className="govuk-header__link "
                    >
                        {t("common:signout-label")}
                    </Link>
                </div>
            </div>
        </div>
    );
};

export default ServiceBanner;