---
import type { CollectionEntry } from "astro:content";
import PostPreview from "@/components/blog/PostPreview.astro";
import SocialList from "@/components/SocialList.astro";
import { getAllPosts } from "@/data/post";
import PageLayout from "@/layouts/Base.astro";
import { collectionDateSort } from "@/utils/date";

// Get all posts
const allPosts = await getAllPosts();

// Posts section - exclude archived and microblog
const MAX_POSTS = 10;
const regularPosts = allPosts.filter(
	(post) => !post.data.tags.includes("archived") && !post.data.tags.includes("microblog"),
);
const allPostsByDate = regularPosts
	.sort(collectionDateSort)
	.slice(0, MAX_POSTS) as CollectionEntry<"post">[];

// Microblog posts section - only posts with microblog tag
const MAX_MICROBLOG = 5;
const allMicroblogPosts = allPosts.filter((post) => post.data.tags.includes("microblog"));
const latestMicroblog = allMicroblogPosts.sort(collectionDateSort).slice(0, MAX_MICROBLOG);
---

<PageLayout meta={{ title: "Home" }}>
	<section>
		<h1 class="title mb-6">Welcome!</h1>
		<p class="mb-4">
			I'm Dawid - DevOps engineer, web developer, and full-time vanlifer. With over a decade of
			experience in cloud technologies and automation, I share insights from life on the road, tech
			tutorials, and digital nomad know-how.
		</p>
		<p class="mb-4">
			Follow along for practical tips on DevOps, web development, and remote work in motion.
		</p>
		<SocialList />
	</section>
	<section class="mt-16">
		<h2 class="title text-accent mb-6 text-xl"><a href="/posts/">Posts</a></h2>
		<ul class="space-y-6" role="list">
			{
				allPostsByDate.map((p) => (
					<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
						<PostPreview post={p} />
					</li>
				))
			}
		</ul>
	</section>
	{
		latestMicroblog.length > 0 && (
			<section class="mt-16">
				<h2 class="title text-accent mb-6 text-xl">
					<a href="/tags/microblog/">Microblog</a>
				</h2>
				<ul class="space-y-6" role="list">
					{latestMicroblog.map((post) => (
						<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
							<PostPreview post={post} as="h3" />
						</li>
					))}
				</ul>
			</section>
		)
	}
</PageLayout>