<script lang="ts">
	import { page } from '$app/state';
	import SocialHyperlink from '$src/lib/components/SocialHyperlink.svelte';
	import InfoBlock from '$src/lib/components/InfoBlock.svelte';
	import BlogCard from '$src/lib/components/BlogCard.svelte';

	function groupPostsByMonthYear(posts: App.BlogPost[]) {
		const groupedPosts = new Map<string, App.BlogPost[]>();

		posts.forEach((post) => {
			const key = new Date(post.date!).toLocaleString('default', {
				month: 'long',
				year: 'numeric'
			});
			if (!groupedPosts.has(key)) groupedPosts.set(key, []);
			groupedPosts.get(key)?.push(post);
		});

		return groupedPosts;
	}

	const groupedPosts = groupPostsByMonthYear(page.data.posts);
</script>

<section class="hero flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4">
	<div
		class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
	>
		<div
			class="font-disket text-center text-4xl font-bold text-slate-50 [text-shadow:_0_0_15px_rgba(0,0,0,0.25)] sm:text-6xl md:text-8xl"
		>
			<h1>БЛОГ</h1>
		</div>
	</div>
</section>

<InfoBlock>
	Подпишитесь на нашу <SocialHyperlink href="/blog/rss.xml">RSS ленту</SocialHyperlink>, чтобы не
	пропускать новые посты!
</InfoBlock>

<section class="flex flex-col items-stretch p-2 pb-8 md:p-4">
	{#each groupedPosts.entries() as [monthYear, postsInMonthYear]}
		<h1
			class="mt-10 mb-4 text-left text-2xl font-bold underline decoration-4 md:text-center md:text-4xl md:decoration-8"
		>
			{monthYear}
		</h1>
		<div class="flex flex-col flex-wrap items-center gap-4">
			{#each postsInMonthYear as post, i}
				<BlogCard {post} />
			{/each}
		</div>
	{/each}
</section>