"use client"

import { useEffect, useRef } from "react"

type IProps = {
  isLoading?: boolean
  isNextPage?: boolean
  hasNextPage?: boolean
  fetchNextPage: () => void
}

export const LoadMoreInfinite = ({ isLoading, hasNextPage, isNextPage, fetchNextPage }: IProps) => {
  const observerTarget = useRef(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          if (!isLoading && hasNextPage && isNextPage) fetchNextPage()
        }
      },
      {
        threshold: 1,
      },
    )

    if (observerTarget.current) {
      observer.observe(observerTarget.current)
    }

    return () => {
      if (observer) {
        observer.disconnect()
      }
    }
  }, [isLoading, fetchNextPage, isNextPage, hasNextPage])

  return <div ref={observerTarget}></div>
}