---
import {
  getCollection,
  render,
  type CollectionEntry,
  type RenderResult,
} from "astro:content";
import Layout from "@/layouts/Layout.astro";
import Tag from "@/components/Tag.astro";
import Markdown from "@/components/Markdown.astro";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  const filteredPosts = posts.filter((post) => !post.data.draft);
  const paths = await Promise.all(
    filteredPosts.map(async (post) => {
      const id = post.id;
      const content = await render(post);
      return {
        params: { id },
        props: { post, content },
      };
    }),
  );
  return paths;
}

interface Props {
  post: CollectionEntry<"blog">;
  content: RenderResult;
}

const { post, content } = Astro.props;
---

<Layout
  title={`${post.data.title} | fiatcode`}
  description={post.data.description}
>
  <article data-pagefind-body>
    <header class="mb-8">
      <h1 class="text-2xl font-bold mb-2">{post.data.title}</h1>
      <h2 class="text-base mb-2">{post.data.description}</h2>
      <div class="flex gap-4 text-neutral-500 text-sm">
        <time datetime={new Date(post.data.date).toISOString()}>
          {
            post.data.date.toLocaleDateString("en-US", {
              year: "numeric",
              month: "long",
              day: "numeric",
            })
          }
        </time>
      </div>
    </header>

    <Markdown>
      <content.Content />
    </Markdown>

    <ul class="flex flex-wrap gap-2">
      {
        post.data.tags?.map((tag) => (
          <li>
            <Tag name={tag} variant="small" />
          </li>
        ))
      }
    </ul>
  </article>
</Layout>
