---
interface Props {
    posts: any[]; // Массив статей из PocketBase
}

const { posts } = Astro.props;
if (!posts || posts.length === 0) return null;
---

<div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
    <div class="flex items-center justify-between mb-5">
        <h3 class="text-lg font-bold text-gray-800">Meistgelesen</h3>
        <span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
    </div>

    <div class="space-y-4">
        {posts.slice(0, 3).map((post, index) => (
                <a href={`/blog/${post.slug}`} class="group flex gap-4 items-start">
                    <!-- Номер (или миниатюра) -->
                    <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg bg-gray-50 text-gray-400 font-bold text-sm group-hover:bg-blue-50 group-hover:text-blue-600 transition-colors">
                        {index + 1}
                    </div>

                    <div>
                        <h4 class="text-sm font-semibold text-gray-700 leading-snug group-hover:text-blue-600 transition-colors line-clamp-2">
                            {post.title}
                        </h4>
                        <p class="text-xs text-gray-400 mt-1">
                            {new Date(post.date).toLocaleDateString('de-DE')}
                        </p>
                    </div>
                </a>
        ))}
    </div>
</div>