import { useEffect, useState } from 'react'

/**
 * The header gains its blurred background as soon as the page leaves the very
 * top — 18px, same threshold as the original landing.
 */
export function useScrolled(threshold = 18) {
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold)
    onScroll()
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [threshold])

  return scrolled
}