"use client";
import { FaArrowUp } from "react-icons/fa";
import { useEffect, useState, useCallback } from "react";

export default function UpScrollIcon() {
  const [showButton, setShowButton] = useState(false);

  // Scroll hodisasini boshqaruvchi funksiya
  const handleScroll = useCallback(() => {
    if (window.scrollY > 200) {
      // 200px dan pastga tushganda tugma ko'rinadi
      setShowButton(true);
    } else {
      setShowButton(false);
    }
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    // Tozalash (cleanup)
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [handleScroll]);

  // Scrollni yuqoriga olib chiqish funksiyasi
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth", // silliq ko'tarilish
    });
  };

  return (
    <>
      {showButton && (
        <span
          onClick={scrollToTop}
          className="fixed bottom-6 right-6 bg-secondary hover:bg-primary text-white p-3 rounded-full cursor-pointer shadow-lg transition"
        >
          <FaArrowUp size={20} />
        </span>
      )}
    </>
  );
}