---
import { getCollection, render } from 'astro:content';
import { Image } from 'astro:assets';
import BaseLayout from '../../layouts/BaseLayout.astro';

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

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

<BaseLayout title={`${post.data.title} | ViciBox`}>
  <div id={`post-${post.id}`}>
    <h1 class="page-title">{post.data.title}</h1>
    <p class="postmetadataw">{post.data.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })}</p>
    <div class="content-ver-sep"> </div>
    <div class="entrytext">
      {post.data.featuredImage && <Image src={post.data.featuredImage} alt={post.data.title} width={650} height={366} />}
      <Content />
    </div>
  </div>
</BaseLayout>