import type { ReactNode } from 'react'

import { useIntersectionObserver } from './hooks'
import { Root, Target } from './styled'

type Props = {
  children: ReactNode,
  className?: string,
  fullPageScroll?: boolean,
  onFetchMore: () => void,
  options?: IntersectionObserverInit,
}

export const InfiniteScroll = ({
  children,
  className,
  fullPageScroll,
  onFetchMore,
  options,
}: Props) => {
  const { rootRef, targetRef } = useIntersectionObserver({
    onIntersect: onFetchMore,
    options,
  })

  return (
    <Root
      // игнорируем rootRef, чтобы отслеживать пересечение target
      // с областью видимости document, т.е. всей страницы
      ref={fullPageScroll ? null : rootRef}
      className={className}
    >
      {children}
      <Target ref={targetRef} />
    </Root>
  )
}
