"use client";

import { useEffect, useState } from "react";

import styles from "@/static/cookie-consent/cookie-consent.module.css";

export const COOKIE_CONSENT_KEY = "autli-cookie-consent";
export const COOKIE_CONSENT_EVENT = "autli-cookie-consent-accepted";

const CookieConsent = () => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const timer = window.setTimeout(() => {
      setVisible(window.localStorage.getItem(COOKIE_CONSENT_KEY) !== "accepted");
    }, 0);

    return () => window.clearTimeout(timer);
  }, []);

  const acceptCookies = () => {
    window.localStorage.setItem(COOKIE_CONSENT_KEY, "accepted");
    window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT));
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <section className={styles.banner} aria-label="Согласие на использование cookie">
      <div className={styles.content}>
        <div className={styles.text}>
          <p className={styles.title}>Cookie-файлы</p>
          <p className={styles.description}>
            Я использую cookie и Яндекс Метрику, чтобы понимать, как работает
            сайт, и улучшать его для посетителей.
          </p>
        </div>

        <button type="button" className={styles.button} onClick={acceptCookies}>
          Принять
        </button>
      </div>
    </section>
  );
};

export default CookieConsent;