---
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
import SectionContainer from '../../components/SectionContainer.astro';

const posts = (await getCollection('blog')).sort(
	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---
<SectionContainer>
	<main class="flex flex-col h-screen gap-4 mt-4">
		<h1 class="text-4xl font-extrabold">Blog posts</h1>
		<section class="mt-4">
			<ul>
				{
					posts.map((post) => (
						<li>
							<FormattedDate date={post.data.pubDate} />
							<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
						</li>
					))
				}
			</ul>
		</section>
	</main>
</SectionContainer>

<style>
	ul {
		list-style-type: none;
		padding: unset;
	}
	ul li {
		display: flex;
	}
	ul li :global(time) {
		flex: 0 0 130px;
		font-style: italic;
		color: #595959;
	}
	ul li a {
		color: #815B5B;
	}
</style>