import { Chunk } from "effect"
import { VPost } from "../post/VPost"
import { Reffuse } from "./reffuse"
import { PostsState } from "./services"


export function VPosts() {

    const state = Reffuse.useMemo(PostsState.PostsState)
    const [posts] = Reffuse.useRefState(state.posts)


    return (
        <div className="flex-col gap-2 items-stretch">
            {Chunk.map(posts, (post, index) => (
                <VPost
                    key={`${ index }-${ post.id }`}
                    index={index}
                    post={post}
                />
            ))}
        </div>
    )

}