import { Post, PostCard } from "./PostCard.tsx";

interface PostOpts {
  posts: Post[];
}

export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
  return (
    <div class="post-carousel">
      <div class="h-screen bg-gray-700 flex items-center justify-center">
        <div class="flex bg-gray-700 space-x-4">
          {posts.map((post: Post, idx: number) => {
            if (idx < 3) {
              return <PostCard post={post} />;
            }
          })}
        </div>
      </div>
    </div>
  );
};