---
interface Props {
    posts: Array<{
        image: string;
        title: string;
        views: string;
    }>;
}

const { posts } = Astro.props;
---

<div class="bg-white/80 backdrop-blur-xl p-6 rounded-2xl shadow-lg border border-white/50">
    <h4 class="font-bold text-gray-900 mb-6 flex items-center gap-2 justify-center text-center md:justify-start">
        <svg class="w-5 h-5 text-[var(--color-gold)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
        </svg>
        <span class="text-center">Популярные статьи</span>
    </h4>
    <div class="space-y-5">
        {posts.map(post => (
                <div class="flex gap-4 group cursor-pointer p-2 -mx-2 rounded-xl hover:bg-gray-50 transition-colors duration-300">
                    <div class="w-16 h-16 flex-shrink-0 rounded-lg overflow-hidden">
                        <img src={post.image} alt="" class="w-full h-full object-cover group-hover:scale-110 transition-transform" />
                    </div>
                    <div>
                        <h5 class="text-sm font-bold text-gray-900 leading-snug group-hover:text-[var(--color-blue-primary)] transition-colors mb-1">
                            {post.title}
                        </h5>
                        <span class="text-[10px] font-bold text-gray-500 uppercase tracking-wide">
            {post.views}
          </span>
                    </div>
                </div>
        ))}
    </div>
</div>
