@props(['model', 'selected' => '', 'options'])

{{-- Underlined tabs bound to a Livewire filter property: one click sets it, '' means "all". --}}
<div role="tablist" {{ $attributes->class(['flex gap-1 border-b border-gray-200 dark:border-gray-700 mb-5 overflow-x-auto overflow-y-hidden']) }}>
    @foreach ($options as $option)
        @php $active = (string) $selected === (string) $option['id']; @endphp
        <button type="button" role="tab" aria-selected="{{ $active ? 'true' : 'false' }}"
            wire:click="$set('{{ $model }}', '{{ $option['id'] }}')"
            @class([
                'px-4 py-3 text-sm font-semibold whitespace-nowrap border-b-2 transition',
                'border-indigo-600 text-indigo-700 dark:text-indigo-300 dark:border-indigo-400' => $active,
                'border-transparent text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200' => ! $active,
            ])>
            {{ $option['name'] }}
        </button>
    @endforeach
</div>