---
import type { CollectionEntry } from 'astro:content';
import {
	getDifficultyColor,
	getDifficultyDisplayName,
	getDifficultyIcon,
	getCategoryIcon,
	getCategoryDisplayName,
} from '../../utils/tutorials';

interface Props {
	tutorial: CollectionEntry<'tutorials'>;
}

const { tutorial } = Astro.props;
const { data } = tutorial;
const difficultyColor = getDifficultyColor(data.difficulty);
---

<a href={`/tutorials/${tutorial.id}`} class="tutorial-card group" data-difficulty={data.difficulty}>
	<div class="card-content">
		<!-- Icon & Badges -->
		<div class="mb-4 flex items-start justify-between">
			<div class="icon">{data.icon}</div>
			<div class="flex flex-wrap justify-end gap-2">
				{data.featured && <span class="badge badge-primary">⭐ Featured</span>}
				{data.popular && <span class="badge badge-secondary">🔥 Popular</span>}
				{data.hasVideo && <span class="badge badge-video">🎥 Video</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 ${difficultyColor}`}>
				<span>{getDifficultyIcon(data.difficulty)}</span>
				<span>{getDifficultyDisplayName(data.difficulty)}</span>
			</span>
			<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}
			</span>
			<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
					></path>
				</svg>
				{data.steps.length} steps
			</span>
		</div>

		<!-- Category -->
		<div class="category">
			<span class="category-badge">
				{getCategoryIcon(data.category)}
				{getCategoryDisplayName(data.category)}
			</span>
		</div>

		<!-- CTA Arrow -->
		<div class="cta-arrow">
			<span>Start Tutorial</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>
	.tutorial-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.5 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;
	}

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

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

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

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

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

	.category {
		@apply mb-4;
	}

	.category-badge {
		@apply inline-flex items-center gap-1.5 rounded-lg border border-dark-border bg-dark-bg px-3 py-1.5 text-xs text-gray-400;
	}

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