---
import { type CollectionEntry, getCollection, render } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';
import CodeBlock from '../../components/CodeBlock.astro';

export async function getStaticPaths() {
	const posts = await getCollection('blog');
	return posts.map((post) => ({
		params: { slug: post.id },
		props: post,
	}));
}
type Props = CollectionEntry<'blog'>;

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

<BlogPost {...post.data}>
	<Content components={{ pre: CodeBlock }} />
</BlogPost>

<style is:global>

	ol {
		margin: 0;
	}
	li {
		color: #eeee;
		font-size: 1rem;
	}
	ol li a {
		text-decoration: none;
		color: #4ecca3;
		font-size: 1rem;
	}

	.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
		color: #eeeeee;
		line-height: 1.25;
	}

	.prose h2 {
		font-size: 2rem;
	}

	.prose p {
		font-size: 1rem;
		color: white;
		margin: 0;
		text-align: ;
	}

	code {
		background-color: var(--gruvbox-soft) !important;
		border-radius: 6px;
		font-family: 'Fira Code', monospace;
		font-size: 0.9rem;
	}
	pre code {
		background-color: var(--gruvbox-soft) !important;
		border-radius: 6px;
		font-family: 'Fira Code', monospace;
		font-size: 0.9rem;
	}

	a {
		text-decoration: none;
		display: inline-block;
		color: #4ecca3;

		&:hover {
			text-decoration: underline;
			color: #fff;
		}
	}

	.astro-code {
		background-color: var(--gruvbox-soft) !important;
		padding: 0.5em 1em;
		border-radius: 6px;
		font-family: 'Fira Code', monospace;
		font-size: 1rem;
	}
</style>