<div class="bg-white dark:bg-surface-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-soft">
    <h3 class="text-lg font-bold text-text-main dark:text-white mb-6">@lang('blog.heading|Categories')</h3>
    <div class="space-y-2">
        @forelse($categories as $category)
            <a class="flex items-center justify-between group p-2 -mx-2 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors"
               href="{{ route('blog.category', $category->slug) }}">
                <span class="text-text-muted dark:text-gray-400 group-hover:text-primary transition-colors">
                    {{ $category->name }}
                </span>
                <span class="text-xs font-medium bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full">
                    {{ $category->posts_count }}
                </span>
            </a>
        @empty
            <p class="text-sm text-text-muted">@lang('blog.No categories found.')</p>
        @endforelse
    </div>
</div>
