import React from "react";
import CookieConsent from "react-cookie-consent";
import { Link } from "react-router-dom";
import Heading from "../Heading/Heading";
import "./PopUpCookies.css";
import { useTranslation } from "react-i18next";
import { motion } from "framer-motion";
export default function PopUpCookies() {
  const { t } = useTranslation();
  return (
    <>
      <CookieConsent
        debug="true"
        location="bottom"
        buttonText={t("cookies.button")}
        cookieName="myAwesomeCookieName2"
        style={{
          background: "white",
          color: "black",
          paddingTop: "20px",
          paddingRight: "20px",
          boxShadow: "0 0 1rem #0000002e",
          width: "50%",
        }}
        buttonStyle={{
          className: "buttonStyle",
          color: "white",
          fontSize: "13px",
          backgroundColor: "#0262F7",
          borderRadius: "5px",
          paddingLeft: "23px",
          paddingRight: "23px",
          paddingTop: "10px",
          paddingBottom: "10px",
        }}
        expires={150}
      >
        <motion.div
          initial={{ y: "10vw" }}
          animate={{ y: 0 }}
          transition={{ ease: "easeOut", duration: 1 }}
        >
          <div>
            <Heading
              title={t("cookies.heading")}
              fontFamily="semibold"
              fontSize="18px"
            />
            <p style={{ fontFamily: "light", fontSize: "14px" }}>
              {t("cookies.1")}
              <span>
                <Link to="/TermsAndConditions">
                  {t("termsandcondition.cookies.title")}
                </Link>
              </span>
              {t("cookies.2")}
              <br />
              {t("cookies.3")}
              <span>
                <Link to="/TermsAndConditions">
                  {t("termsandcondition.privecypolicy.title")}
                </Link>
              </span>
              .
            </p>
          </div>
        </motion.div>
      </CookieConsent>
    </>
  );
}
