import { useState } from 'react'
import robotLogo from '../../../assets/images/robot-coin1.png'
import { MdOutlineKeyboardDoubleArrowUp } from 'react-icons/md'
const BackToTopButton = () => {
    const [isVisible, setIsVisible] = useState(false)

    const toggleVisibility = () => {
        if (window.pageYOffset > 100) {
            setIsVisible(true)
        } else {
            setIsVisible(false)
        }
    }

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

    window.addEventListener('scroll', toggleVisibility)

    return (
        <div
            className={`bg-orange-500 back-to-top ${
                isVisible ? 'visible' : ''
            } group relative m-12 flex justify-center`}
            onClick={scrollToTop}
        >
            <img src={robotLogo} className="rounded-full" alt="back" />
            <span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center">
                👆
            </span>
        </div>
    )
}

export default BackToTopButton
