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

export const Route = createFileRoute("/blog/")({
	loader: async () => {
		const posts = await findPosts();
		return { posts: posts.docs };
	},
	component: BlogIndex,
	head: () => ({
		meta: [
			{ title: `${m.site_name()} - ${m.blog_title()}` },
			{ name: "description", content: m.blog_meta_description() },
		],
	}),
});

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

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