---
import { type CollectionEntry, getCollection } from "astro:content";
import PageLayout from "@layouts/PageLayout.astro";
import Container from "@components/Container.astro";
import FormattedDate from "@components/FormattedDate.astro";
import { readingTime } from "@lib/utils";
import BackToPrev from "@components/BackToPrev.astro";

export async function getStaticPaths() {
  const posts = (await getCollection("blog"))
    .filter(post => !post.data.draft)
    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: post,
  }));
}
type Props = CollectionEntry<"blog">;

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

<PageLayout title={post.data.title} description={post.data.description}>
  <Container>
    <div class="animate">
      <BackToPrev href="/blog">
        Back to blog
      </BackToPrev>
    </div>
    <div class="space-y-1 my-10">
      <div class="animate flex items-center gap-1.5">
        <div class="font-base text-sm">
          <FormattedDate date={post.data.date} />
        </div>
        &bull;
        <div class="font-base text-sm">
          {readingTime(post.body)}
        </div>
      </div>
      <div class="animate text-2xl font-semibold text-black dark:text-white">
        {post.data.title}
      </div>
    </div>
    <article class="animate">
      <Content />
    </article>
  </Container>
</PageLayout>