import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { VerticalAlignTopOutlined } from '@ant-design/icons';

const Button = styled.button`
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #666666;
    color: white;
    font-size: 16px;
    display: ${props => (props.$show ? 'flex' : 'none')};
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;

    &:hover {
        background-color: #333333;
    }
`;

const TopButton = () => {
	const [visible, setVisible] = useState(false);

	useEffect(() => {
		const toggleVisibility = () => {
			if (window.pageYOffset > 300) {
				setVisible(true);
			} else {
				setVisible(false);
			}
		};

		window.addEventListener('scroll', toggleVisibility);

		return () => window.removeEventListener('scroll', toggleVisibility);
	}, []);

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

	return (
		<Button
			$show={visible}
			onClick={scrollToTop}
			title="맨 위로 이동"
		>
			<VerticalAlignTopOutlined />
		</Button>
	);
};

export default TopButton;