<script lang="ts" setup>
import { useInfiniteScroll } from '@vueuse/core'

const props = withDefaults(defineProps<{ canLoadMore: boolean }>(), {
  canLoadMore: true
})
const emit = defineEmits<{ (e: 'intersected'): void }>()

const observe = ref<HTMLDivElement | null>(null)

useInfiniteScroll(
  observe,
  () => {
    emit('intersected')
  },
  {
    distance: 10,
    interval: 1000,
    canLoadMore() {
      return props.canLoadMore
    }
  }
)
</script>

<template>
  <div>
    <slot />
    <div ref="observe" />
  </div>
</template>

<style scoped></style>
