---
import { getCollection, render } from 'astro:content';

import Layout from '@layouts/Layout.astro';
import BlogHeader from '@components/BlogHeader.astro';
import Tags from '@components/Tags.astro';

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

const { post } = Astro.props;

const { data } = post;

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

<Layout title={data.title}>
	<h1></h1>
	<article>
		<BlogHeader title={data.title} date={data.pubDate} />
		<Content />
		<a href="https://notbyai.fyi/">
			<i class="not-by-ai"></i>
		</a>
		<Tags tags={data.tags} />
	</article>
</Layout>

<style>
	.not-by-ai {
		display: block;
		width: 134px;
		height: 45px;
		background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-white.svg);
		background-repeat: no-repeat;
		background-position: center;
		margin: 1rem 0;
	}

	@media (prefers-color-scheme: dark) {
		.not-by-ai {
			background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-black.svg);
		}
	}
</style>
