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

export const getStaticPaths = (async () => {
  const posts = await getCollection(
    "posts",
    ({ data }) => import.meta.env.DEV || !data.draft,
  );
  return posts.map((post) => ({ params: { slug: post.id }, props: { post } }));
}) satisfies GetStaticPaths;

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

const day = new Intl.DateTimeFormat("en", {
  dateStyle: "long",
  timeZone: "UTC",
});
---

<Layout
  title={`${post.data.title} · substandard`}
  description={post.data.description}
  ogType="article"
  atUri={post.data.atUri}
>
  <main class="post-page">
    <section class="post-card">
      <h2>{post.data.title}</h2>
      <p class="post-meta">
        <time datetime={post.data.publishDate.toISOString()}>
          {day.format(post.data.publishDate)}
        </time>
        {
          post.data.updatedDate && (
            <span>updated {day.format(post.data.updatedDate)}</span>
          )
        }
        {post.data.tags.map((tag) => <span class="post-tag">{tag}</span>)}
      </p>
      <Content />
    </section>

    <p class="post-back"><a href="/posts">← all updates</a></p>
  </main>
</Layout>