---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import BaseLayout from '@/layouts/BaseLayout.astro';
import Table from '@/components/blog/Table.astro';

export async function getStaticPaths() {
	const blogEntries = await getCollection('blog');
	return blogEntries.map((entry) => ({
		params: { slug: entry.slug },
		props: { entry },
	}));
}

interface Props {
	entry: CollectionEntry<'blog'>;
}

const { entry } = Astro.props as Props;
const { Content } = await entry.render();
const components = { table: Table };
const { title, description } = entry.data;

const descriptionMeta =
	description.length > 158 ? description.substring(0, 155) + '...' : description;
---

<BaseLayout title={title} description={descriptionMeta}>
	<div
		class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl"
		data-pagefind-body>
		<h1 transition:name={title} class="text-4xl font-bold">{title}</h1>
		<Content components={components} />
	</div>
</BaseLayout>
