"use client";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
import Button from "./ui/button";
import useCookie from "@/hooks/useCookie";

const CookiesBanner = () => {
  const { cookieBanner, setCookie } = useCookie("cookieConsentMawdy", "true", 14);
  return (
    <AnimatePresence>
      {!cookieBanner && (
        <motion.section
          initial={{ y: "100%" }}
          animate={{ y: 0 }}
          exit={{ y: "100%" }}
          transition={{ ease: "circInOut", type: "tween", duration: 0.6 }}
          className="bg-dark-blue fixed w-full bottom-0 z-50 text-white pb-[1.875rem] pt-3 border-t border-light-blue/60"
        >
          <div className="mawdy-container">
            <Image
              src="/images/mawdy-logo.svg"
              alt="Mawdy Logo"
              width={184}
              height={65}
              className="w-[11.5rem] h-[4.0625rem] -ml-6"
            />
            <p className="text-[0.875rem] md:text-[1rem] leading-[1.3]">
              <span className="text-[1.125rem] md:text-[1.25rem] block mb-6">Aviso de uso de cookies</span>
              MAWDY CHILE no utiliza cookies para recoger información de los usuarios en este sitio web. Únicamente
              utiliza cookies técnicas o estrictamente necesarias para permitir la navegación y el acceso a los
              servicios y funcionalidades del sitio web. Si deseas más información, puedes consultar nuestra{" "}
              <a
                href="https://www.mawdy.cl/aviso-privacidad/#navegacion-con-cookies"
                target="_blank"
                className="mawdy-link-alt underline underline-offset-2"
              >
                Política de Cookies
              </a>{" "}
              y{" "}
              <a
                href="https://www.mawdy.cl/aviso-privacidad/"
                target="_blank"
                className="mawdy-link-alt underline underline-offset-2"
              >
                Política de Privacidad
              </a>
              .
            </p>
            <div className="flex md:justify-end pt-8">
              <div className="flex flex-col md:flex-row flex-1 md:flex-none gap-4">
                <Button
                  text="Entendido"
                  className="w-full hover:border-white border-2 border-transparent md:w-[8.125rem]"
                  onClick={setCookie}
                />
              </div>
            </div>
          </div>
        </motion.section>
      )}
    </AnimatePresence>
  );
};

export default CookiesBanner;