@props([
    'tabs',
    'active',
])

<div data-tabs role="tablist" aria-label="Sections de l'éditeur" {{ $attributes->merge(['class' => 'flex gap-1 overflow-x-auto border-b border-brand-border']) }}>
    @foreach ($tabs as $key => $label)
        <button
            type="button"
            role="tab"
            data-tab-trigger="{{ $key }}"
            aria-selected="{{ $key === $active ? 'true' : 'false' }}"
            tabindex="{{ $key === $active ? '0' : '-1' }}"
            class="admin-tab-trigger shrink-0 whitespace-nowrap border-b-2 px-3.5 py-2.5 text-sm font-medium transition-colors"
        >
            {{ $label }}
        </button>
    @endforeach
</div>
