import { useEffect, useRef } from 'react'

export function useScrollToBlock(
  scrollRef: React.RefObject<HTMLElement | null>,
  blockId: string | undefined,
  deps: React.DependencyList,
  delay = 450,
) {
  useEffect(() => {
    if (!blockId || !scrollRef.current) return
    const timer = window.setTimeout(() => {
      const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(blockId) : blockId
      const el = scrollRef.current?.querySelector(`[data-id="${escaped}"]`)
      el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }, delay)
    return () => window.clearTimeout(timer)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [blockId, delay, ...deps])
}