---
import BlogLayout from "../../../layouts/BlogLayout.astro";
import { readContentCache } from "../../../lib/content/cache";
import { wordpressCategories, wordpressPostBySlug, wordpressPosts } from "../../../lib/content/selectors";
import { getPublicConfig } from "../../../lib/config";

export async function getStaticPaths() {
  const cache = await readContentCache();
  return wordpressPosts(cache).map((post) => ({
    params: { slug: post.slug },
  }));
}

const cache = await readContentCache();
const categories = wordpressCategories(cache);

const slug = Astro.params.slug || "";
const post = wordpressPostBySlug(cache, slug);

if (!post) {
  return new Response(null, { status: 404 });
}

const metaDescription = (post.excerpt || "").slice(0, 160);
const cfg = getPublicConfig();
const siteUrl = (cfg.siteUrl || "http://localhost:4321").replace(/\/$/, "");

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: post.title,
  description: metaDescription || "Blog post",
  image: post.featuredImageUrl || undefined,
  datePublished: post.publishedAt,
  dateModified: post.updatedAt,
  mainEntityOfPage: {
    "@type": "WebPage",
    "@id": `${siteUrl}/blog/post/${post.slug}`,
  },
  author: {
    "@type": "Person",
    name: "SanthoshJ",
    url: `${siteUrl}/`,
  },
  publisher: {
    "@type": "Person",
    name: "SanthoshJ",
    url: `${siteUrl}/`,
  },
};
---

<BlogLayout
  title={`${post.title} | Blog | SanthoshJ`}
  description={metaDescription || "Blog post"}
  canonicalPath={`/blog/post/${post.slug}`}
  categories={categories}
  ogImageUrl={post.featuredImageUrl}
>
  <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
  <section class="section">
    <div class="section-header">
      <h2 style="margin: 0;">{post.title}</h2>
      <a
        class="muted"
        href="/blog"
        data-umami-event="click"
        data-umami-event-target_id="blog.post.back"
        data-umami-event-placement="blog.post"
        data-umami-event-target_url="/blog"
      >
        Back →
      </a>
    </div>
    <p class="muted" style="margin-top: 0;">
      {new Date(post.publishedAt).toLocaleDateString()}
    </p>
    {post.featuredImageUrl ? (
      <div class="img-shimmer-wrap" style="width: 100%; max-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12);">
        <img
          src={post.featuredImageUrl}
          alt=""
          loading="lazy"
          class="img-loading"
          style="width: 100%; max-height: 420px; object-fit: cover; display: block;"
        />
      </div>
    ) : null}
    <div class="prose" set:html={post.contentHtml} />
  </section>
</BlogLayout>
