---
import { getCollection, render } from 'astro:content';
import CoralComments from '@/components/CoralComments.astro';
import InteractiveRuntime from '@/components/InteractiveRuntime.astro';
import DefaultLayout from '@/layouts/DefaultLayout.astro';
import { BlogPost } from '@/components/sections/blog-post';
import { ACTIVE_BLOG_SITE } from '@/blog-sites.js';
import { SITE_TITLE } from '@/consts';

export async function getStaticPaths() {
	const posts = await getCollection(ACTIVE_BLOG_SITE.key);
	return posts.map((post) => ({
		params: { slug: post.id.replace(/\/index$/, '') },
		props: post,
	}));
}

const post = Astro.props;
const { Content } = await render(post);
const postSlug = post.id.replace(/\/index$/, '');
const coralStoryID = `${ACTIVE_BLOG_SITE.key}:${postSlug}`;
const coralStoryURL = new URL(`/${postSlug}/`, ACTIVE_BLOG_SITE.url).toString();
---

<DefaultLayout title={`${post.data.title} | ${SITE_TITLE}`} description={post.data.description}>
	<div class="py-10 md:py-16 lg:py-20">
		<BlogPost post={post}>
			<Content />
		</BlogPost>
	</div>

	<InteractiveRuntime />
	<CoralComments storyID={coralStoryID} storyURL={coralStoryURL} />
</DefaultLayout>
