---
import BlogLayout from "../../layouts/BlogLayout.astro";
import BlogPostCard from "../../components/BlogPostCard.astro";
import { readContentCache } from "../../lib/content/cache";
import { wordpressCategories, wordpressPages, wordpressPosts } from "../../lib/content/selectors";

const cache = await readContentCache();
const categories = wordpressCategories(cache);
const posts = wordpressPosts(cache);
const pages = wordpressPages(cache);
---

<BlogLayout
  title="Blog | SanthoshJ"
  description="Latest posts from my WordPress blog."
  canonicalPath="/blog"
  categories={categories}
>
  <section class="section">
    <div class="section-header">
      <h2>Latest posts</h2>
      <span class="muted">{posts.length} post{posts.length === 1 ? "" : "s"}</span>
    </div>

    {posts.length > 0 ? (
      <div class="blog-grid">
        {posts.map((p) => (
          <BlogPostCard post={p} placement="blog.index" targetId={`blog.index.card.post.${p.slug}`} />
        ))}
      </div>
    ) : (
      <div class="empty">No blog posts yet. Configure WordPress and run <code>npm run fetch-content</code>.</div>
    )}
  </section>

  {pages.length > 0 ? (
    <section class="section">
      <div class="section-header">
        <h2>Pages</h2>
        <a
          class="muted"
          href="/blog/pages"
          data-umami-event="click"
          data-umami-event-target_id="blog.index.pages.browse"
          data-umami-event-placement="blog.index.pages_preview"
          data-umami-event-target_url="/blog/pages"
        >
          Browse pages →
        </a>
      </div>
      <div class="empty">
        {pages.slice(0, 6).map((p) => (
          <div>
            <a
              href={`/blog/page/${p.slug}`}
              data-umami-event="click"
              data-umami-event-target_id={`blog.index.pages.link.${p.slug}`}
              data-umami-event-placement="blog.index.pages_preview"
              data-umami-event-target_url={`/blog/page/${p.slug}`}
              data-umami-event-title={p.title}
              data-umami-event-type="blog_page"
            >
              {p.title}
            </a>
          </div>
        ))}
      </div>
    </section>
  ) : null}
</BlogLayout>
