import { watchEffect, type Ref } from 'vue'

export function useElementFinalSize(
  elementRef: Ref<HTMLElement | null>,
  onFinalSize: (height: number) => void,
  delay = 100,
) {
  watchEffect((onCleanup) => {
    const { value: element } = elementRef
    if (!element) return

    // Wait for next frame after a short delay, then measure
    const timeoutId = setTimeout(() => {
      requestAnimationFrame(() => {
        const { height } = element.getBoundingClientRect()
        if (height > 0) {
          onFinalSize(height)
        }
      })
    }, delay)

    onCleanup(() => clearTimeout(timeoutId))
  })
}