<script lang="ts">
	type Post = {
		slug: string;
		date: string;
		title: string;
		description: string;
		tags?: string[];
	};

	let { posts = [] }: { posts: Post[] } = $props();

	function fmtDate(d: string) {
		try {
			return new Intl.DateTimeFormat('ru', {
				day: 'numeric',
				month: 'short',
				year: 'numeric'
			}).format(new Date(d));
		} catch {
			return d;
		}
	}
</script>

{#if posts.length > 0}
	<div class="border-b border-white/6">
		<section class="px-5 py-24 sm:px-10 sm:py-32">
			<div class="mb-12 flex items-end justify-between">
				<h2 class="font-display text-4xl font-black uppercase tracking-tighter">БЛОГ</h2>
				<a
					href="/blog"
					class="font-display text-[0.75rem] font-bold tracking-wider text-desc transition-colors duration-150 hover:text-white"
				>
					ВСЕ СТАТЬИ →
				</a>
			</div>

			<div
				class="grid grid-cols-1 overflow-hidden rounded-xl border border-white/6 sm:grid-cols-[repeat(auto-fit,minmax(20rem,1fr))]"
			>
				{#each posts as post, i}
					<a
						href="/blog/{post.slug}"
						class="flex flex-col gap-5 p-10 no-underline transition-colors duration-150 hover:bg-white/2
						       {i > 0 ? 'border-t border-white/6 sm:border-t-0 sm:border-l' : ''}"
					>
						<div class="flex items-center justify-between">
							<time datetime={post.date} class="font-mono text-[0.6875rem] tracking-widest text-zinc-600">
								{fmtDate(post.date)}
							</time>
							{#if post.tags?.length}
								<span class="font-mono text-[0.625rem] uppercase tracking-widest text-zinc-600">
									{post.tags[0]}
								</span>
							{/if}
						</div>
						<h3
							class="font-display font-black leading-tight tracking-tight text-[clamp(1.25rem,2.5vw,1.75rem)]"
						>
							{post.title}
						</h3>
						<p class="flex-1 text-sm leading-relaxed text-desc">{post.description}</p>
						<span class="font-display text-[0.75rem] font-bold tracking-wider text-primary">
							ЧИТАТЬ →
						</span>
					</a>
				{/each}
			</div>
		</section>
	</div>
{/if}
