@props([
    'categories',
])

<section class="rounded-2xl border border-black/10 bg-[#f7f4ef] p-5 dark:border-white/10 dark:bg-zinc-950">
    <div class="flex items-center justify-between gap-4">
        <div>
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-[#b6332a]">Branchen</p>
            <h2 class="mt-2 text-lg font-semibold text-zinc-950 dark:text-white">Zugänge nach Themen</h2>
        </div>
        <a href="{{ route('kategorien') }}" class="text-sm font-semibold text-[#cf3628] hover:text-[#a92c25]">Alle</a>
    </div>

    @if ($categories->isNotEmpty())
        <div class="mt-5 flex flex-col gap-2">
            @foreach ($categories as $category)
                <a href="{{ $category['url'] }}" class="group flex items-center justify-between gap-4 rounded-xl border border-black/5 bg-white px-4 py-3 text-sm transition hover:border-[#cf3628]/30 dark:border-white/10 dark:bg-zinc-900">
                    <span class="font-medium text-zinc-800 group-hover:text-[#cf3628] dark:text-zinc-100">{{ $category['name'] }}</span>
                    @if ($category['count'] > 0)
                        <span class="rounded-full bg-[#cf3628]/10 px-2.5 py-1 text-xs font-semibold text-[#a92c25]">{{ $category['count'] }}</span>
                    @endif
                </a>
            @endforeach
        </div>
    @else
        <p class="mt-5 rounded-xl border border-dashed border-black/10 bg-white px-4 py-4 text-sm leading-6 text-zinc-600 dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-300">
            Branchenzugänge werden angezeigt, sobald aktive Kategorien mit deutscher Übersetzung vorhanden sind.
        </p>
    @endif
</section>