import React, {useState} from 'react'

export const ScrollTopButton = () => {
  const [visible, setVisible] = useState(false)

  const toggleVisible = () => {
    const scrolled = document.documentElement.scrollTop
    if (scrolled > 300) {
      setVisible(true)
    } else if (scrolled <= 300) {
      setVisible(false)
    }
  }

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

  window.addEventListener('scroll', toggleVisible)

  return (
    <i
      className="bi bi-arrow-up-square scroll-top-btn text-info"
      onClick={() => scrollToTop()}
      style={{display: visible ? 'inline' : 'none'}}
    />
  )
}