import { useState, useEffect, RefObject } from 'react'

export const useScrollFromTop = (ref: RefObject<HTMLElement>, offset = 0): boolean => {
  const [isScrolled, setIsScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      const top = ref.current?.getBoundingClientRect().top || 0
      setIsScrolled(top <= offset)
    }

    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [ref, offset])

  return isScrolled
}

export const useScrollFromBottom = (ref: RefObject<HTMLElement>, offset = 0): boolean => {
  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      const element = ref.current
      if (!element) return

      const distanceFromBottom = element.getBoundingClientRect().bottom - window.innerHeight
      setIsScrolledToBottom(distanceFromBottom <= offset)
    }

    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [ref, offset])

  return isScrolledToBottom
}