@props(['tabs' => [], 'current' => null, 'model' => null])

<div class="no-print mb-4 border-b border-slate-200 dark:border-slate-800">
    <nav class="-mb-px flex flex-wrap gap-x-6">
        @foreach ($tabs as $key => $label)
            @php $active = $current === $key; @endphp

            @if ($model)
                <button
                    type="button"
                    wire:click="$set('{{ $model }}', '{{ $key }}')"
                    @class([
                        'border-b-2 px-1 py-3 text-sm font-medium transition',
                        'border-[var(--tx-primary)] text-brand' => $active,
                        'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700 dark:text-slate-400' => ! $active,
                    ])
                >{{ $label }}</button>
            @else
                <a
                    href="{{ $key }}" wire:navigate
                    @class([
                        'border-b-2 px-1 py-3 text-sm font-medium transition',
                        'border-[var(--tx-primary)] text-brand' => $active,
                        'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700 dark:text-slate-400' => ! $active,
                    ])
                >{{ $label }}</a>
            @endif
        @endforeach
    </nav>
</div>