import { PageContainer } from "@/components/layout/page-container";
import { BlogCard } from "@/components/ui/blog-card";
import { Button } from "@/components/ui/button";
import { EmptyStateCard } from "@/components/ui/empty-state-card";
import { getBlogPosts } from "@/lib/starter-data";

export async function HomeBlogHighlightsSection() {
  const posts = await getBlogPosts(3);

  return (
    <section className="pt-20 pb-0">
      <PageContainer className="space-y-8">
        <div className="flex items-end justify-between gap-6">
          <h2 className="text-[38px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
            Savjeti i novosti
          </h2>
          <Button href="/blog" size="md">
            Pogledaj sve
          </Button>
        </div>

        {posts.length > 0 ? (
          <div className="grid gap-5 xl:grid-cols-3">
            {posts.map((post) => (
              <BlogCard key={post.id} post={post} />
            ))}
          </div>
        ) : (
          <EmptyStateCard
            title="Blog još nema objava"
            description="Kad dodaš objave u WordPress, ovdje će se prikazati zadnje tri blog objave."
          />
        )}
      </PageContainer>
    </section>
  );
}