---
import type { CollectionEntry } from 'astro:content';
import TemplateCard from './TemplateCard.astro';

export interface Props {
	templates: CollectionEntry<'promptTemplates'>[];
	title?: string;
	description?: string;
}

const {
	templates,
	title = 'Featured Templates',
	description = 'Hand-picked templates for the best results',
} = Astro.props;
---

{
	templates.length > 0 && (
		<section class="bg-white py-16">
			<div class="container mx-auto px-4">
				<div class="mb-8 flex items-center justify-between">
					<div>
						<h2 class="text-3xl font-bold text-gray-900">{title}</h2>
						<p class="mt-2 text-gray-600">{description}</p>
					</div>
				</div>

				<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
					{templates.map((template) => (
						<TemplateCard template={template} />
					))}
				</div>
			</div>
		</section>
	)
}
