---
import PostTags from '@components/blog/PostTags.astro';

interface Props {
    post: any; // Объект статьи из PocketBase
    compact?: boolean; // Опция для компактного вида (опционально)
}

const { post, compact = false } = Astro.props;

// Форматирование даты
const formattedDate = new Date(post.date).toLocaleDateString('de-DE', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
});
---

<a
        href={`/blog/${post.slug}`}
        class="group flex flex-col h-full bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-out"
        aria-label={`Artikel lesen: ${post.title}`}
>
    <!-- Контейнер изображения -->
    <div class="relative w-full aspect-[16/9] overflow-hidden bg-gray-100">
        {post.image ? (
                <img
                        src={`${import.meta.env.POCKETBASE_URL || import.meta.env.PUBLIC_POCKETBASE_URL}/api/files/${post.collectionId}/${post.id}/${post.image}`}
                        alt={post.title}
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                        width="800"
                        height="450"
                />
        ) : (
            // Заглушка, если нет картинки
            <div class="w-full h-full flex items-center justify-center bg-gray-50 text-gray-300">
                    <svg class="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
        )}

        <!-- Оверлей даты поверх картинки (стильный бейдж) -->
        <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-bold text-gray-700 shadow-sm border border-white/20">
            {formattedDate}
        </div>
    </div>

    <!-- Контент -->
    <div class="flex flex-col grow p-6">
        <!-- Автор (если есть) -->
        {post.author && (
                <div class="text-xs text-gray-400 font-medium mb-2 uppercase tracking-wide">
                    {post.author}
                </div>
        )}

        <h3 class="text-xl font-bold text-gray-900 mb-3 line-clamp-2 leading-tight group-hover:text-blue-600 transition-colors">
            {post.title}
        </h3>

        {!compact && (
                <p class="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3 grow">
                    {post.description}
                </p>
        )}

        <!-- Футер карточки с тегами -->
        <div class="mt-auto pt-4 border-t border-gray-50 flex items-center justify-between">
            <PostTags
                tags={post.tags || []}
                size="sm"
                isLink={false}
                maxVisible={2}
            />

            <!-- Иконка стрелки -->
            <span class="text-blue-500 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
            </span>
        </div>
    </div>
</a>