"use client";

import { useEffect, useState } from "react";

export function useScrollDepth(threshold: number = 20): boolean {
  const [hasReachedThreshold, setHasReachedThreshold] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (hasReachedThreshold) return;
      
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
      
      if (scrollPercent >= threshold) {
        setHasReachedThreshold(true);
      }
    };

    window.addEventListener("scroll", handleScroll, { passive: true });
    handleScroll();
    
    return () => window.removeEventListener("scroll", handleScroll);
  }, [threshold, hasReachedThreshold]);

  return hasReachedThreshold;
}