import React, { useState, useEffect } from 'react';
import { ArrowUp } from 'lucide-react';

const ScrollToTop: React.FC = () => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setVisible(window.scrollY > 300);
    };

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

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

  if (!visible) return null;

  return (
    <button
      onClick={scrollToTop}
      className="fixed bottom-8 right-8 w-14 h-14 bg-brand-orange rounded-full shadow-2xl hover:bg-orange-600 hover:scale-110 transition-all z-40 flex items-center justify-center group"
      aria-label="Наверх"
    >
      <ArrowUp className="text-white group-hover:translate-y-[-2px] transition-transform" size={24} />
    </button>
  );
};

export default ScrollToTop;