<script lang="tsx">
import {
  defineComponent, ref, type PropType, type Ref,
} from 'vue'
import useScrollPagination from '../../../composables/use-scroll-pagination'

export default defineComponent({
  name: 'PaginationTrigger',

  props: {
    /**
     * Функция, вызываемая при достижении триггера пагинации
     */
    onDown: {
      type: Function as PropType<() => void>,
      required: true,
    },
  },

  setup(props) {
    const triggerElement = ref<HTMLElement | undefined>()

    useScrollPagination({
      callback: () => {
        props.onDown()
      },
      trigger: triggerElement as Ref<HTMLElement>,
    })

    return () => (
      <div
        ref={triggerElement}
        class='pagination-trigger'
      />
    )
  },
})
</script>

<style lang="scss" scoped>
.pagination-trigger {
  height: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
