import { useRef } from 'react'
import { useIntersectionLoad } from '../../../hooks/useIntersectionLoad.ts'
import { Post } from '../posts/posts.ts'
import PostItem from './PostItem.tsx'

interface FeedViewProps {
  pages: Post[][]
  onLoadMore: () => Promise<void>
}

export default function FeedView({ pages, onLoadMore }: FeedViewProps) {
  const sentinelRef = useRef<HTMLDivElement | null>(null)
  const posts = pages.flat()

  useIntersectionLoad(onLoadMore, sentinelRef)

  return (
    <div className="w-full">
      <div className="flex flex-col gap-6 w-full">
        <div className="flex flex-col gap-6 w-full">
          {posts.map((post) => (
            <PostItem key={post.postId} post={post} />
          ))}
        </div>
      </div>
      <div ref={sentinelRef} className="h-1" />
    </div>
  )
}