import React, { useState, useEffect } from 'react';

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

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

    window.addEventListener('scroll', toggleVisibility);

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

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

  return (
    <div
      className={`fixed bottom-6 right-6 z-50 cursor-pointer transition-opacity duration-300 ${
        isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
      }`}
      onClick={scrollToTop}
    >
      <div className="w-12 h-12 bg-zinc-300 rounded-full shadow-lg hover:bg-zinc-400 transition-colors duration-200" />
      <div className="w-3 left-[18px] top-[20px] absolute origin-top-left -rotate-90 text-center justify-start text-black text-sm font-thin font-['Noto_Sans_KR']">{">"}</div>
      <div className="left-[15px] top-[20px] absolute text-center justify-start text-black text-xs font-thin font-['Noto_Sans_KR']">TOP</div>
    </div>
  );
};

export default TopButton;