---
import { getCollection, render } from "astro:content";
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
  const posts = await getCollection("posts");
  return posts.map((post) => ({
    params: { id: post.id },
    props: { post },
  }));
}
// 2. For your template, you can get the entry directly from the prop
const { post } = Astro.props;
const { Content } = await render(post);

import BaseLayout from "../../layouts/BaseLayout.astro";

function formatDate(dateString: string) {
  const date = new Date(dateString);
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

import { Icon } from "astro-icon/components";
---

<BaseLayout title={post.data.title + " | Samvid Konchada"}>
  <div style="padding-top: 1rem;">
    <a class="back-link" href="/posts">&lt;- All posts</a>
    <h1 style="margin-top: 0.25rem; margin-bottom: 0.5rem">
      {post.data.title}
    </h1>
    <div
      style="display: flex; align-items: center; margin-bottom: 1rem; gap: 0.25rem;"
    >
      <Icon name="lucide:calendar" />
      <p style="margin: 0;">
        {formatDate(post.data.pubDate.toString())}
      </p>
    </div>
    <div class="article">
      <Content />
    </div>
  </div>
</BaseLayout>

<style>
  .article {
    padding: 1rem;
    background-color: #292e28;
    border-radius: 10px;
  }
  .back-link {
    font-size: 0.75rem;
    text-decoration: none;
  }
  .back-link:hover {
    text-decoration: underline;
  }
</style>
