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

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">
                    {/* <span
                        className="govuk-warning-text__icon"
                        aria-hidden="true"
                    >
                        <Image
                            src="/assets/images/information.svg"
                            width="30px"
                            height="30px"
                        />
                    </span> */}
                    <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>
            ) : (
                ""
            )}
        </>
    );
}