---
import type { CollectionEntry } from 'astro:content';
import { getDifficultyColor, getDifficultyDisplayName } from '../../utils/useCases';

interface Props {
	useCase: CollectionEntry<'useCases'>;
}

const { useCase } = Astro.props;
const { data } = useCase;
---

<a href={`/use-cases/${useCase.id}`} class="use-case-card group">
	<div class="card-content">
		<!-- Icon & Badges -->
		<div class="mb-4 flex items-start justify-between">
			<div class="icon">{data.icon}</div>
			<div class="flex gap-2">
				{data.featured && <span class="badge badge-primary">Featured</span>}
				{data.popular && <span class="badge badge-secondary">Popular</span>}
			</div>
		</div>

		<!-- Title & Description -->
		<h3 class="title">{data.title}</h3>
		<p class="description">{data.description}</p>

		<!-- Meta Info -->
		<div class="meta">
			<span class="meta-item">
				<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
				</svg>
				{data.estimatedTime || '5-10 min'}
			</span>
			<span class={`meta-item ${getDifficultyColor(data.difficulty)}`}>
				<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="M13 10V3L4 14h7v7l9-11h-7z"></path>
				</svg>
				{getDifficultyDisplayName(data.difficulty)}
			</span>
		</div>

		<!-- CTA Arrow -->
		<div class="cta-arrow">
			<span>Learn more</span>
			<svg
				class="h-5 w-5 transition-transform group-hover:translate-x-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
			</svg>
		</div>
	</div>
</a>

<style>
	.use-case-card {
		@apply block rounded-2xl border border-dark-border bg-dark-elevated p-6
		       transition-all duration-300 hover:-translate-y-1 hover:border-primary
		       hover:shadow-xl hover:shadow-primary/10;
	}

	.card-content {
		@apply flex h-full flex-col;
	}

	.icon {
		@apply text-4xl;
	}

	.badge {
		@apply rounded-full px-2 py-1 text-xs font-medium;
	}

	.badge-primary {
		@apply border border-primary/20 bg-primary/10 text-primary;
	}

	.badge-secondary {
		@apply border border-purple-500/20 bg-purple-500/10 text-purple-400;
	}

	.title {
		@apply mb-3 text-xl font-bold text-white transition-colors group-hover:text-primary;
	}

	.description {
		@apply mb-4 flex-grow text-sm leading-relaxed text-gray-400;
	}

	.meta {
		@apply mb-4 flex items-center gap-4 border-b border-dark-border pb-4 text-sm text-gray-500;
	}

	.meta-item {
		@apply flex items-center gap-1.5;
	}

	.cta-arrow {
		@apply flex items-center justify-between text-sm font-medium text-primary;
	}
</style>
