---
interface Props {
    categories: Array<{
        name: string;
        count: number;
    }>;
}

const { categories } = Astro.props;

// Функция для URL-safe кодирования категории
function encodeCategory(name: string): string {
    return encodeURIComponent(name.toLowerCase().replace(/\s+/g, '-'));
}
---

<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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
        </svg>
        <span class="text-center">Категории</span>
    </h4>
    <div class="flex flex-wrap gap-2">
        {categories.length > 0 ? (
            categories.map(cat => (
                <a 
                    href={`/blog/category/${encodeCategory(cat.name)}`} 
                    class="group inline-flex items-center px-4 py-2.5 bg-gray-50 hover:bg-[var(--color-blue-primary)] border border-gray-100 hover:border-[var(--color-blue-primary)] rounded-xl text-sm font-semibold text-gray-700 hover:text-white transition-all duration-300 hover:shadow-lg hover:shadow-[var(--color-blue-primary)]/20 hover:-translate-y-0.5"
                >
                    {cat.name}
                    <span class="ml-2 px-2 py-0.5 bg-white/50 group-hover:bg-white/20 rounded-full text-xs transition-colors">
                        {cat.count}
                    </span>
                </a>
            ))
        ) : (
            <p class="text-sm text-gray-500">Категории загружаются...</p>
        )}
    </div>
</div>