import React, {useEffect, useState} from 'react';
import Styles from './ScrollToTopButton.module.css'
import backTop from '../../assets/images/main/back_top.png';

const ScrollToTopButton = () => {
    const [isVisible, setIsVisible] = useState(false);

    // 监听滚动事件
    useEffect(() => {
        const toggleVisibility = () => {
            if (window.scrollY > 300) {
                setIsVisible(true);
            } else {
                setIsVisible(false);
            }
        };
        window.addEventListener('scroll', toggleVisibility);
        return () => window.removeEventListener('scroll', toggleVisibility);
    }, []);

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

    return (
        isVisible && (
            <img
                src={backTop}
                onClick={scrollToTop}
                className={Styles.backToTop}
                onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
                onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.7')}
            />
        )
    );
};

export default ScrollToTopButton;