import { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowUp } from "@fortawesome/free-solid-svg-icons";

/**
 * Schwebender Button unten rechts, der zum Seitenanfang zurückscrollt.
 * Erscheint erst, sobald tatsächlich runtergescrollt wurde (kein Sinn, ihn
 * direkt am Anfang der Seite schon anzuzeigen).
 */
export function ScrollToTopButton() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    function onScroll() {
      setVisible(window.scrollY > 300);
    }
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  if (!visible) return null;

  return (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      title="Nach oben scrollen"
      aria-label="Nach oben scrollen"
      className="fixed bottom-20 right-5 z-30 flex h-11 w-11 items-center justify-center rounded-full
        border border-black/10 bg-white/90 text-lg text-black/70 shadow-lg backdrop-blur-md
        transition-opacity hover:bg-white dark:border-white/10 dark:bg-neutral-900/90
        dark:text-white/70 dark:hover:bg-neutral-900"
    >
      <FontAwesomeIcon icon={faArrowUp} />
    </button>
  );
}