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

interface Props {
	image: CollectionEntry<'gallery'>;
	showStats?: boolean;
}

const { image, showStats = true } = Astro.props;
const { data } = image;
---

<article
	class="group relative overflow-hidden rounded-xl bg-white shadow-md transition hover:shadow-2xl dark:bg-gray-800"
	data-category={data.category}
>
	<a href={`/gallery/${data.slug}`} class="block">
		<!-- Image -->
		<div class="relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-700">
			<img
				src={data.imageUrl}
				alt={data.title}
				class="h-full w-full object-cover transition duration-300 group-hover:scale-110"
				loading="lazy"
			/>

			<!-- Overlay on Hover -->
			<div
				class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 transition duration-300 group-hover:opacity-100"
			>
				<div class="absolute bottom-0 left-0 right-0 p-4">
					<p class="line-clamp-2 text-sm text-white">
						{data.prompt}
					</p>
				</div>
			</div>

			<!-- Badges -->
			<div class="absolute left-3 top-3 flex flex-wrap gap-2">
				{
					data.featured && (
						<span class="rounded-full bg-blue-600 px-2 py-1 text-xs font-semibold text-white backdrop-blur-sm">
							🌟
						</span>
					)
				}
				{
					data.trending && (
						<span class="rounded-full bg-pink-600 px-2 py-1 text-xs font-semibold text-white backdrop-blur-sm">
							🔥
						</span>
					)
				}
				{
					data.staffPick && (
						<span class="rounded-full bg-purple-600 px-2 py-1 text-xs font-semibold text-white backdrop-blur-sm">
							✨
						</span>
					)
				}
			</div>

			<!-- Quality Score -->
			{
				data.qualityScore && (
					<div class="absolute right-3 top-3">
						<div class="rounded-full bg-black/50 px-2 py-1 text-xs font-semibold text-white backdrop-blur-sm">
							⭐ {data.qualityScore}/5
						</div>
					</div>
				)
			}
		</div>

		<!-- Content -->
		<div class="p-4">
			<!-- Title -->
			<h3 class="mb-2 line-clamp-2 font-bold text-gray-900 dark:text-white">
				{data.title}
			</h3>

			<!-- Model Badge -->
			<div class="mb-3 flex items-center gap-2">
				<span
					class="rounded-full bg-gradient-to-r from-blue-500 to-purple-500 px-2 py-1 text-xs font-semibold text-white"
				>
					{data.model}
				</span>
				<span
					class="rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300"
				>
					{data.category}
				</span>
			</div>

			<!-- Stats -->
			{
				showStats && (
					<div class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
						<div class="flex items-center gap-1">
							<span>❤️</span>
							<span>{data.likes}</span>
						</div>
						<div class="flex items-center gap-1">
							<span>👁️</span>
							<span>{data.views}</span>
						</div>
						<div class="flex items-center gap-1">
							<span>⬇️</span>
							<span>{data.downloads}</span>
						</div>
					</div>
				)
			}

			<!-- Creator -->
			{
				data.creator && (
					<div class="mt-3 flex items-center gap-2 border-t border-gray-100 pt-3 dark:border-gray-700">
						{data.creator.avatar && (
							<img src={data.creator.avatar} alt={data.creator.name} class="h-6 w-6 rounded-full" />
						)}
						<span class="text-xs text-gray-600 dark:text-gray-400">{data.creator.name}</span>
					</div>
				)
			}
		</div>
	</a>
</article>
