---
import BlogCard from './BlogCard.astro';
import type { ImageMetadata } from 'astro';

interface RelatedPost {
	title: string;
	description: string;
	pubDate: Date;
	heroImage?: ImageMetadata;
	category?: string;
	tags?: string[];
	href: string;
}

interface Props {
	posts: RelatedPost[];
	class?: string;
}

const { posts, class: className = '' } = Astro.props;
---

{posts.length > 0 && (
	<section class:list={['related-posts mt-20 pt-12 border-t border-white/10', className]}>
		<div class="flex items-center gap-4 mb-8">
			<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest font-bold">
				/// RELATED ARTICLES
			</span>
			<span class="h-px flex-grow bg-white/10"></span>
		</div>
		
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
			{posts.slice(0, 3).map((post) => (
				<BlogCard
					title={post.title}
					description={post.description}
					pubDate={post.pubDate}
					heroImage={post.heroImage}
					category={post.category}
					tags={post.tags}
					href={post.href}
					variant="compact"
				/>
			))}
		</div>
	</section>
)}