'use client'

import * as React from 'react'
import { useMotionValueEvent, useScroll } from 'motion/react'

export function usePageScrollThreshold(threshold = 0) {
  const { scrollY } = useScroll()
  const [isPastThreshold, setIsPastThreshold] = React.useState(false)

  const updateThresholdState = React.useCallback(
    (scrollTop = scrollY.get()) => {
      const nextIsPastThreshold = scrollTop > threshold
      setIsPastThreshold((current) =>
        current === nextIsPastThreshold ? current : nextIsPastThreshold
      )
    },
    [scrollY, threshold]
  )

  React.useEffect(() => {
    updateThresholdState()
  }, [updateThresholdState])

  useMotionValueEvent(scrollY, 'change', updateThresholdState)

  return isPastThreshold
}