// Plaaayground v2 — ScrollToTop
// Blueprint: 06 — Floating button that appears on scroll threshold

import { useState, useEffect, type RefObject } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowUp } from "lucide-react";
import { spring } from "@/lib/motion";
import { cn } from "@/lib/utils";

export interface ScrollToTopProps {
  threshold?: number;
  scrollContainerRef?: RefObject<HTMLElement>;
  className?: string;
}

export function ScrollToTop({
  threshold = 300,
  scrollContainerRef,
  className,
}: ScrollToTopProps) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const target = scrollContainerRef?.current || window;
    function handleScroll() {
      const scrollY =
        target instanceof Window
          ? target.scrollY
          : (target as HTMLElement).scrollTop;
      setVisible(scrollY > threshold);
    }
    target.addEventListener("scroll", handleScroll, { passive: true });
    return () => target.removeEventListener("scroll", handleScroll);
  }, [threshold, scrollContainerRef]);

  function scrollToTop() {
    const target = scrollContainerRef?.current || window;
    target.scrollTo({ top: 0, behavior: "smooth" });
  }

  return (
    <AnimatePresence>
      {visible && (
        <motion.button
          onClick={scrollToTop}
          className={cn(
            "fixed bottom-6 right-6 z-40",
            "w-10 h-10 rounded-full",
            "bg-card border border-border shadow-lg",
            "flex items-center justify-center",
            "text-muted-foreground hover:text-foreground",
            "transition-colors cursor-pointer",
            className
          )}
          initial={{ scale: 0.8, opacity: 0, y: 10 }}
          animate={{ scale: 1, opacity: 1, y: 0 }}
          exit={{ scale: 0.8, opacity: 0, y: 10 }}
          transition={spring.default}
          whileTap={{ scale: 0.92 }}
          aria-label="Scroll to top"
        >
          <ArrowUp className="w-4 h-4" />
        </motion.button>
      )}
    </AnimatePresence>
  );
}
ScrollToTop

Preview
