---
import type { CollectionEntry } from 'astro:content';
import { localizePath } from '../../i18n';
import { formatDate, calculateReadingTime } from '@/utils/blog';
import { t } from '../../i18n';

interface Props {
	post: CollectionEntry<'blog'>;
}

const { post } = Astro.props;
const { title, description, publishedAt, coverImage, category, tags } = post.data;
const readingTime = calculateReadingTime(post.body);
---

<article
	class="group overflow-hidden rounded-2xl border border-dark-border bg-dark-elevated transition-all duration-300 hover:scale-[1.02] hover:border-primary/50"
>
	<!-- Cover Image -->
	<a href={localizePath(`/blog/${post.slug}`)} class="relative block aspect-video overflow-hidden">
		<div
			class="absolute inset-0 z-10 bg-gradient-to-t from-dark-bg/80 to-transparent opacity-0 transition-opacity group-hover:opacity-100"
		>
		</div>
		<img
			src={coverImage}
			alt={title}
			class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
			loading="lazy"
		/>
		<!-- Category Badge -->
		<div class="absolute left-4 top-4 z-20">
			<span
				class="rounded-full bg-primary/90 px-3 py-1 text-sm font-medium capitalize text-white backdrop-blur-sm"
			>
				{t(`blog.categories.${category}`)}
			</span>
		</div>
	</a>

	<!-- Content -->
	<div class="p-6">
		<!-- Meta Info -->
		<div class="mb-3 flex items-center gap-4 text-sm text-gray-400">
			<time datetime={publishedAt.toISOString()}>
				{formatDate(publishedAt, post.data.language)}
			</time>
			<span>•</span>
			<span>{readingTime} {t('blog.min_read')}</span>
		</div>

		<!-- Title -->
		<a href={localizePath(`/blog/${post.slug}`)} class="mb-3 block">
			<h3
				class="line-clamp-2 text-xl font-bold text-white transition-colors group-hover:text-primary"
			>
				{title}
			</h3>
		</a>

		<!-- Description -->
		<p class="mb-4 line-clamp-2 text-gray-300">
			{description}
		</p>

		<!-- Tags -->
		<div class="flex flex-wrap gap-2">
			{
				tags
					.slice(0, 3)
					.map((tag) => (
						<span class="rounded bg-dark-surface px-2 py-1 text-xs text-gray-400">#{tag}</span>
					))
			}
		</div>
	</div>
</article>
