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

interface Props {
	images: CollectionEntry<'gallery'>[];
	columns?: 2 | 3 | 4;
	showStats?: boolean;
}

const { images, columns = 4, showStats = true } = Astro.props;

const gridClasses = {
	2: 'grid-cols-1 sm:grid-cols-2',
	3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
	4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
};
---

<div class={`grid gap-6 ${gridClasses[columns]}`}>
	{images.map((image) => <GalleryCard image={image} showStats={showStats} />)}
</div>

{
	images.length === 0 && (
		<div class="rounded-2xl border-2 border-dashed border-gray-300 bg-gray-50 px-8 py-16 text-center dark:border-gray-700 dark:bg-gray-800">
			<div class="mb-4 text-6xl">🖼️</div>
			<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">No Images Found</h3>
			<p class="text-gray-600 dark:text-gray-400">Try adjusting your filters or search query.</p>
		</div>
	)
}
