import cookie from "cookie-cutter";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useState } from "react";

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

    const router = useRouter();

    const [bannerOpen, setBannerOpen] = useState(true);

    const { noticeContent } = props;
    const hideNotice = () => {
        let now = new Date();
        let expDate = new Date(now);

        expDate.setDate(now.getDate() + 365);
        cookie.set("pedwNotice", "true", {
            expires: expDate,
            path: "/",
        });

        setBannerOpen(false);
    };

    const bannerOpenCookie = typeof cookie.get("pedwNotice") == "undefined";

    return (
        <>
            {bannerOpenCookie ? (
                <div className="govuk-warning-text noticebanner">
                    <strong className="govuk-warning-text__text">
                        <span className="govuk-warning-text__assistive">
                            Warning
                        </span>
                        {router.locale != "en"
                            ? noticeContent.value[0].notice_cy
                            : noticeContent.value[0].notice_en}
                    </strong>
                    <div className="hideNotice">
                        <span
                            className="govuk-link"
                            onClick={() => {
                                hideNotice();
                            }}
                        >
                            {t("common:hide-banner-label")}
                        </span>
                    </div>
                </div>
            ) : (
                ""
            )}
        </>
    );
}