---
import { getCollection, render } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import NavBar from '../../components/NavBar.astro';
import PostHeader from '../../components/PostHeader.astro';
import { getReadingTime } from '../../utils/reading-time';
import '../../styles/prose.css';

export async function getStaticPaths() {
  const posts = await getCollection('posts');
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

interface Props {
  post: CollectionEntry<'posts'>;
}

const { post } = Astro.props;
const { Content } = await render(post);
const readingTime = post.body ? getReadingTime(post.body) : undefined;
---

<BaseLayout title={post.data.title} description={post.data.summary}>
  <NavBar slot="nav" />
  <PostHeader
    title={post.data.title}
    date={post.data.date}
    type={post.data.type}
    readingTime={readingTime}
  />
  <article class="prose-wrapper">
    <div class="prose">
      <Content />
    </div>
  </article>
</BaseLayout>

<style>
  .prose-wrapper {
    max-width: var(--width-prose);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: var(--space-12);
  }
</style>