import CookieConsent from "react-cookie-consent";
import Link from "next/link";
import useTranslation from "next-translate/useTranslation";

const CookieBanner = () => {
    let { t, lang } = useTranslation();
    return (
        <CookieConsent
            style={{
                position: "inherit",
                background: "#eeeeee",
                display: "block",
            }}
            containerClasses="app-cookie-banner"
            buttonClasses="cookies-banner__button"
            buttonWrapperClasses="govuk-width-container consentBanner"
            declineButtonClasses="cookies-banner__button"
            buttonText={t("common:cookie-banner-accept")}
            declineButtonText={t("common:cookie-banner-decline")}
            disableStyles={true}
            enableDeclineButton={true}
            flipButtons={true}
            hideOnAccept={true}
            cookieName="planning_casework"
        >
            <div className="app-cookie-banner">
                <div
                    id="global-cookie-message"
                    className="govuk-clearfix"
                    data-module="cookie-banner"
                    role="region"
                    aria-label="cookie banner"
                    data-nosnippet=""
                >
                    <div className="govuk-width-container">
                        <div className="govuk-grid-row">
                            <div className="govuk-grid-column-two-thirds">
                                <div className="">
                                    <p className="cookies-banner__description">
                                        {t("common:cookie-banner-line-1")}
                                    </p>
                                    <ul className="cookies-banner__description">
                                        <li>
                                            {" "}
                                            {t(
                                                "common:cookie-banner-list-item-1"
                                            )}
                                        </li>
                                    </ul>
                                    <p className="cookies-banner__description">
                                        {t("common:cookie-banner-line-2")}
                                    </p>
                                    <ul className="cookies-banner__description">
                                        <li>
                                            {t(
                                                "common:cookie-banner-list-item-2"
                                            )}
                                        </li>
                                        <li>
                                            {t(
                                                "common:cookie-banner-list-item-3"
                                            )}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </CookieConsent>
    );
};

export default CookieBanner;