'use client';

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

function ScrollToTop() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setVisible(window.scrollY > 300);
    };

    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  return (
    <button
      className={clsx(s.Scroll, visible && s.Visible)}
      onClick={scrollToTop}
      aria-label='Переместить наверх'
    >
      <Icons.Chevron />
    </button>
  );
}

export { ScrollToTop };
