"use client";
import { useEffect, useState } from "react";
import { ArrowUp } from "lucide-react"; // آیکون فلش به بالا

export default function BackToTopButton() {
  const [visible, setVisible] = useState(false);

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

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

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

  return (
    <div>
      {visible && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-6 left-6 z-50 
            p-3 rounded-full shadow-lg transition-colors 
            bg-gray-200 text-gray-800 hover:bg-gray-300
            dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
        >
          <ArrowUp size={24} />
        </button>
      )}
    </div>
  );
}
