@props([
    'items' => [],
])

<nav class="-mx-1 mb-4 overflow-x-auto px-1 pb-1" aria-label="{{ __('budgets.shell.context_tabs_aria') }}">
    <div class="flex min-w-max items-center gap-2">
        @foreach ($items as $item)
            @php
                $href = (string) ($item['href'] ?? '#');
                $label = (string) ($item['label'] ?? '');
                $active = (bool) ($item['active'] ?? false);
            @endphp
            <a
                href="{{ $href }}"
                wire:navigate
                class="inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-semibold ios-transition-fast ios-press {{ $active ? 'border-primary/30 bg-primary/10 text-primary' : 'border-border bg-card text-muted-foreground hover:text-foreground' }}"
            >
                {{ $label }}
            </a>
        @endforeach
    </div>
</nav>