import { onBeforeUnmount, ref, watch } from 'vue'

export function useAnimatedHeight(contentRef) {
    const height = ref(null)
    let observer = null

    watch(contentRef, (element) => {
        observer?.disconnect()
        observer = null

        if (!element) {
            height.value = null
            return
        }

        observer = new ResizeObserver(([entry]) => {
            height.value = entry.contentRect.height
        })
        observer.observe(element)
    })

    onBeforeUnmount(() => observer?.disconnect())

    return height
}