---
import { CollectionEntry, getCollection } from "astro:content";
import { Image } from "astro:assets";
import ContentLayout from "@/layouts/content.astro";
import { getArticleSchema } from "@/lib/structuredData";
import { blogWebsite } from "@/lib/structuredData";

interface Props {
  post: CollectionEntry<"blog">;
}
export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: post,
  }));
}
const post = Astro.props;
const { Content } = await post.render();
const articleStructuredData = getArticleSchema(post);
 
const breadcrumbsStructuredData = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: [
    {
      "@type": "ListItem",
      position: 1,
      name: "Blog",
      item: `${import.meta.env.SITE}/blog/`,
    },
    {
      "@type": "ListItem",
      position: 2,
      name: post.data.title,
      item: `${import.meta.env.SITE}/blog/${post.slug}/`,
    },
  ],
};
const jsonLd = {
  "@context": "https://schema.org",
  "@graph": [articleStructuredData, breadcrumbsStructuredData, blogWebsite],
};
---

<ContentLayout>
  <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
  <div class="relative max-w-8xl mx-auto">
    <article class="prose prose-lg mx-auto max-w-4xl">
      {post.data.image && (
        <div class="-mx-4 sm:mx-0 mb-8">
          <Image
            src={post.data.image}
            alt={post.data.title}
            class="w-full h-auto rounded-lg object-cover"
            width={1200}
            height={630}
            quality={100}
          />
        </div>
      )}
      <h1 class="text-3xl pt-4">{post.data.title}</h1>
      <p class="lg:text-2xl sm:text-lg">{post.data.description}</p>
      <p class="text-lg">{post.data.author} | {post.data.date}</p>
      <div class="flex flex-wrap gap-2 pb-4">
        {post.data.tags.map((tag) => (
          <span class="text-sm px-2 py-1 bg-muted rounded-full">
            #{tag}
          </span>
        ))}
      </div>
      <hr class="bg-orange" />
      <Content />
    </article>
  </div>
</ContentLayout>
