---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Content from "@/components/astro/Content.astro";
import type { Post } from "@/types";
import { getPost, getPosts } from "@/utils/payload";

export async function getStaticPaths() {
  const posts = await getPosts();
  const paths = posts.map((post: Post) => ({
    params: { id: post.id },
  }));
  return paths;
}

const { id } = Astro.params;
const post = id && (await getPost(id));
---

{
  post ? (
    <BaseLayout title={`Astroad | ${post.title!}`}>
      <div class="space-y-3 my-3">
        <a href="/">BACK</a>
        <h1 class="font-bold text-5xl" transition:name=`title-${post.id}`>{post.title}</h1>
        {post.content && <Content content={post.content} />}
      </div>
    </BaseLayout>
  ) : (
    <div>404</div>
  )
}