---
import { getCollection, type CollectionEntry, render } from "astro:content";
import Layout from "../../layouts/Layout.astro";
import "../../styles/post.css";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post: { id: any }) => ({
    params: { post_id: post.id },
    props: post,
  }));
}
type Props = CollectionEntry<"blog">;

const post = Astro.props;
const { Content } = await render(post);
---

<Layout>
  <main>
    <div>
      <h1>{post.data.title}</h1>
      <h2>{post.data.tags}</h2>
      <img
        src={post.data.illustration?.src}
        alt={post.data?.illustration?.src}
      />
    </div>
    <Content />
  </main>
</Layout>