import { createFileRoute } from "@tanstack/react-router";
import PostCard from "@/components/PostCard";
import Section from "@/components/Section";
import { findPosts } from "@/lib/cms";

export const Route = createFileRoute("/blog/")({
	loader: async () => {
		const posts = await findPosts();
		return { posts: posts.docs };
	},
	component: BlogIndex,
	head: () => ({
		meta: [
			{ title: "unom - Blog" },
			{
				name: "description",
				content: "Notizen, Gedanken und Tutorials aus der Werkstatt von unom.",
			},
		],
	}),
});

function BlogIndex() {
	const { posts } = Route.useLoaderData();

	return (
		<Section className="pt-height-header">
			<h1>Blog</h1>
			{posts.length === 0 ? (
				<p>Noch keine Beiträge.</p>
			) : (
				<div className="grid gap-6 md:grid-cols-2 mt-6">
					{posts.map((post) => (
						<PostCard key={post.id} post={post} />
					))}
				</div>
			)}
		</Section>
	);
}
