---
import "../../styles/post.scss";
import BaseLayout from "../../layouts/BaseLayout.astro";
import { type CollectionEntry, getCollection } from "astro:content";
import Timestamp from "../../components/Timestamp.astro";
// import BlogPost from "../../layouts/BlogPost.astro";

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

type Props = CollectionEntry<"posts">;

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

<BaseLayout>
  <h1 class="post-title">{post.data.title}</h1>

  <small class="post-meta">
    Posted on <Timestamp timestamp={post.data.date} />
     - {remarkPluginFrontmatter.minutesRead}
  </small>

  <!-- <BlogPost {...post.data}> -->
  <Content />
  <!-- </BlogPost> -->
</BaseLayout>