import { BlogCard } from "@/components/ui/blog-card";
import { EmptyStateCard } from "@/components/ui/empty-state-card";
import type { StorefrontBlogPostCard } from "@/types/storefront";

export function BlogListSection({ posts }: { posts: StorefrontBlogPostCard[] }) {
  if (posts.length === 0) {
    return (
      <EmptyStateCard
        title="Blog još nema objava"
        description="Kad se objave WordPress postovi, ovdje će se automatski pojaviti pregled članaka."
      />
    );
  }

  return (
    <section className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
      {posts.map((post) => (
        <BlogCard key={post.id} post={post} />
      ))}
    </section>
  );
}