---
import { getCollection, render } from "astro:content";
import Layout from "../../layouts/Layout.astro";

export async function getStaticPaths() {
  const entries = await getCollection("blog");
  return entries
    .filter((entry) => (import.meta.env.PROD ? !!entry.data.isPublic : true))
    .map((entry) => ({
      params: { id: entry.id },
      props: { entry },
    }));
}

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

<Layout>
  <h1>{entry.data.title}</h1>
  <ul>
    {entry.data.tags.map((tag: string) => <li class="badge outline">{tag}</li>)}
  </ul>
  <Content />
</Layout>

<style>
  ul {
    padding-left: 0;
    margin-left: 0;
    display: flex;
  }

  ul > li:not(:last-child) {
    margin-right: 0.5rem;
  }
</style>
