text: import React, { useEffect, useState } from "react"
  import ScrollImage from "../../images/scroll.svg"
  import PropTypes from "prop-types"
  
  const ScrollToTop = ({ containerCssClass, imageCssClass, textCssClass }) => {
    if (!containerCssClass) return ( <div/> )
    const [isVisible, setIsVisible] = useState(false)
  
    // Show button when page is scorlled upto given distance
    const toggleVisibility = () => {
      if (window.pageYOffset > 300) {
        setIsVisible(true)
      } else {
        setIsVisible(false)
      }
    }
  
    // Set the top cordinate to 0
    // make scrolling smooth
    const scrollToTop = () => {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      })
    }
  
    useEffect(() => {
      window.addEventListener("scroll", toggleVisibility)
    }, [])
  
    return (
      <div className={containerCssClass}>
        {isVisible && 
          <div onClick={scrollToTop}>
            <img src={ScrollImage} alt='Go to top' className={imageCssClass} />
            <span className={textCssClass}>Back to Top</span>
          </div>}
      </div>
    )
  }
  
  ScrollToTop.propTypes = {
    containerCssClass: PropTypes.string.isRequired,
    imageCssClass: PropTypes.string.isRequired,
    textCssClass: PropTypes.string.isRequired
  }
  
  export default ScrollToTop