import { ref, onMounted, type Ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export function useScrollReveal(threshold = 0.15) {
  const target = ref<HTMLElement | null>(null) as Ref<HTMLElement | null>
  const isVisible = ref(false)

  onMounted(() => {
    useIntersectionObserver(
      target,
      ([entry]) => {
        if (entry?.isIntersecting) {
          isVisible.value = true
        }
      },
      { threshold },
    )
  })

  return { target, isVisible }
}
