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

interface PostOpts {
  posts: Post[];
}

export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
  return (
    <div className="flex w-full bg-[#313244] p-8">
      <div className="items-center justify-center">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-7xl w-full">
          {posts.map((post: Post) => (
            <PostCard key={post.post_id} post={post} />
          ))}
        </div>
      </div>
    </div>
  );
};