---
import type { CollectionEntry } from 'astro:content';
import { formatCategoryName } from '../../utils/promptTemplates';

export interface Props {
	template: CollectionEntry<'promptTemplates'>;
	featured?: boolean;
	compact?: boolean;
}

const { template, featured = false, compact = false } = Astro.props;
const slug = template.slug;
---

<a
	href={`/prompt-templates/${slug}`}
	class={`group bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1 ${featured ? 'lg:col-span-2' : ''}`}
>
	<div class={`p-${compact ? '4' : '6'}`}>
		<!-- Header -->
		<div class="mb-3 flex items-start justify-between">
			<div class="flex items-center gap-3">
				<span class={`text-${compact ? '2xl' : '3xl'}`}>{template.data.icon}</span>
				<div>
					<h3
						class={`text-${compact ? 'base' : 'lg'} font-bold text-gray-900 group-hover:text-purple-600 transition-colors line-clamp-${compact ? '1' : '2'}`}
					>
						{template.data.title}
					</h3>
					{
						!compact && (
							<div class="mt-1 flex items-center gap-2">
								<span
									class={`rounded-full px-2 py-0.5 text-xs font-semibold ${
										template.data.difficulty === 'beginner'
											? 'bg-green-100 text-green-800'
											: template.data.difficulty === 'intermediate'
												? 'bg-yellow-100 text-yellow-800'
												: 'bg-red-100 text-red-800'
									}`}
								>
									{template.data.difficulty}
								</span>
							</div>
						)
					}
				</div>
			</div>

			<!-- Badges -->
			<div class="flex flex-col gap-1">
				{
					template.data.featured && (
						<span class="rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-semibold text-yellow-800">
							⭐
						</span>
					)
				}
				{
					template.data.popular && (
						<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
							Popular
						</span>
					)
				}
				{
					template.data.trending && (
						<span class="rounded-full bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-800">
							🔥
						</span>
					)
				}
			</div>
		</div>

		<!-- Description -->
		{!compact && <p class="mb-4 line-clamp-2 text-sm text-gray-600">{template.data.description}</p>}

		<!-- Category & Tags -->
		{
			!compact && (
				<div class="mb-4 flex flex-wrap gap-2">
					<span class="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700">
						{formatCategoryName(template.data.category)}
					</span>
					{template.data.tags.slice(0, 2).map((tag) => (
						<span class="rounded-full bg-gray-50 px-3 py-1 text-sm text-gray-600">#{tag}</span>
					))}
				</div>
			)
		}

		<!-- Stats -->
		<div class="flex items-center justify-between border-t border-gray-100 pt-4">
			<div class="flex items-center gap-4 text-sm text-gray-500">
				<span class="flex items-center gap-1">
					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
						></path>
					</svg>
					{template.data.likes}
				</span>
				<span class="flex items-center gap-1">
					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
						></path>
					</svg>
					{template.data.uses}
				</span>
			</div>

			<div class="flex items-center gap-1 text-yellow-500">
				<svg class="h-4 w-4 fill-current" viewBox="0 0 24 24">
					<path
						d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
					></path>
				</svg>
				<span class="text-sm font-semibold text-gray-700">{template.data.rating}</span>
			</div>
		</div>

		<!-- Model -->
		{
			!compact && (
				<div class="mt-4 border-t border-gray-100 pt-4">
					<div class="flex items-center justify-between text-sm">
						<span class="text-gray-500">Recommended:</span>
						<span class="font-semibold text-gray-700">{template.data.recommendedModel}</span>
					</div>
				</div>
			)
		}
	</div>
</a>
