---
import BlogLayout from '@/layouts/BlogLayout.astro';
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog', ({ data }) => {
    return data.locale === 'en' && (import.meta.env.PROD ? data.draft !== true : true);
  });

  return posts.map((post) => ({
    params: { slug: post.id.replace('en/', '') },
    props: { post },
  }));
}

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

<BlogLayout
  title={post.data.title}
  description={post.data.description}
  publishedAt={post.data.publishedAt}
  updatedAt={post.data.updatedAt}
  author={post.data.author}
  image={post.data.image}
  imageAlt={post.data.imageAlt}
  svgSlug={post.data.svgSlug}
  tags={post.data.tags}
  slug={post.id}
>
  <Content />
</BlogLayout>
