import { useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import { ArrowUp } from "lucide-preact";

export default function ScrollUpButton() {
  const isVisible = useSignal(false);

  useEffect(() => {
    const checkScroll = () => {
      isVisible.value = window.scrollY > 50;
    };

    checkScroll();

    window.addEventListener("scroll", checkScroll);

    return () => {
      window.removeEventListener("scroll", checkScroll);
    };
  }, []);

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

  return (
    <button
      onClick={scrollToTop}
      class={`fixed bottom-4 right-4 z-20 btn btn-secondary hover:btn-primary
            btn-circle transition-all duration-300
            ${
              isVisible.value
                ? "opacity-100 translate-y-0"
                : "opacity-0 translate-y-10 pointer-events-none"
            }`}
      aria-label="Scroll to top"
    >
      <ArrowUp class="text-lg" />
    </button>
  );
}
