import { useEffect, useState } from 'react'

export default function ScrollToButtonButton() {
  const [hasScrollToTopButton, setHasScrollToTopButton] = useState(false)

  function toggleScrollTopButton() {
    setHasScrollToTopButton(
      document.body.scrollTop > 50 || document.documentElement.scrollTop > 50
    )
  }

  useEffect(() => {
    window.addEventListener('scroll', toggleScrollTopButton)

    return () => {
      window.removeEventListener('scroll', toggleScrollTopButton)
    }
  }, [])

  return (
    <>
      {hasScrollToTopButton && (
        <a href="#" className="scroll-top btn-hover">
          <i className="lni lni-chevron-up"></i>
        </a>
      )}
    </>
  )
}
