'use client';

import s from './styles.module.scss';
import { useEffect, useState } from 'react';
import { Button } from '@shared/ui';
import { clsx } from 'clsx';
import Link from 'next/link';

export default function CookiesNotice() {
  const [seenCookie, setSeenCookie] = useState(true);
  const [clicked, setClicked] = useState(false);

  useEffect(() => {
    const seenCookie = localStorage.getItem('seen_cookie');
    if (!seenCookie) setSeenCookie(false);
  }, []);

  const handleClickAgree = () => {
    localStorage.setItem('seen_cookie', 'true');
    setClicked(true);
  };

  const handleClickCancel = () => {
    setClicked(true);
  };

  return seenCookie ? null : (
    <div className={clsx(s.Cookies, clicked && s.Hide)}>
      <div className={s.Container}>
        <span className={s.Text}>
          Мы используем cookie. <br /> Во время посещения этого сайта вы
          соглашаетесь с тем, что мы обрабатываем ваши персональные данные с
          использованием метрических программ. <br />
          <Link href={'/cookie'}>Подробнее</Link>
        </span>

        <div className={s.ButtonBox}>
          <Button onClick={handleClickCancel} fullWidth>
            Отмена
          </Button>

          <Button variant={'ghost'} onClick={handleClickAgree} fullWidth>
            Согласится
          </Button>
        </div>
      </div>
    </div>
  );
}