---
import { getCollection } from "astro:content";

const posts = (await getCollection("blog"))
	.filter((post) => !post.data.draft)
	.sort(
		(a, b) =>
			b.data.pubDate.valueOf() -
			a.data.pubDate.valueOf(),
	)
	.slice(0, 3);
---

<section class="border-t border-[var(--border)]">

	<div class="mx-auto max-w-7xl px-6 py-28 lg:px-8 lg:py-36">

		<div class="flex flex-col justify-between gap-6 md:flex-row md:items-end">

			<div>

				<div class="font-mono text-[10px] tracking-widest text-[var(--muted)]">
					04 / NOTES
				</div>

				<h2 class="mt-4 text-4xl font-bold tracking-tight sm:text-5xl">
					Latest notes
				</h2>

			</div>

			<a
				href="/blog"
				class="font-mono text-[10px] text-[var(--muted)] transition-colors hover:text-[var(--text)]"
			>
				VIEW ALL NOTES →
			</a>

		</div>

		<div class="mt-16 space-y-px border border-[var(--border)] bg-[var(--border)]">

			{posts.map((post) => (
				<a
					href={`/blog/${post.id}/`}
					class="group block bg-[var(--surface)] p-6 transition-colors hover:bg-[var(--surface-hover)] lg:p-8"
				>

					<div class="grid gap-5 md:grid-cols-[150px_1fr_auto] md:items-center">

						<time
							datetime={post.data.pubDate.toISOString()}
							class="font-mono text-[10px] text-[var(--muted)]"
						>
							{post.data.pubDate.toLocaleDateString(
								"en-US",
								{
									year: "numeric",
									month: "short",
									day: "numeric",
								},
							)}
						</time>

						<div>

							<h3 class="text-lg font-semibold transition-colors group-hover:text-[var(--accent)]">
								{post.data.title}
							</h3>

							<p class="mt-2 text-sm text-[var(--muted)]">
								{post.data.description}
							</p>

						</div>

						<div class="font-mono text-[10px] text-[var(--muted)]">
							READ →
						</div>

					</div>

				</a>
			))}

		</div>

	</div>

</section>