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

<div {{ $attributes->merge(['class' => 'bv-tabs']) }}>
    <ul class="bv-tabs__list" role="tablist">
        @foreach($tabs as $key => $tab)
            <li class="bv-tabs__item" role="presentation">
                <a href="{{ $tab['href'] ?? '#' . $key }}"
                   class="bv-tabs__link {{ ($active ?? array_key_first($tabs)) === $key ? 'is-active' : '' }}"
                   role="tab"
                   @if(isset($tab['aria-controls'])) aria-controls="{{ $tab['aria-controls'] }}" @endif
                   @if(($active ?? array_key_first($tabs)) === $key) aria-selected="true" @endif>
                    @if(isset($tab['icon']))
                        <i class="bi {{ $tab['icon'] }} me-1" aria-hidden="true"></i>
                    @endif
                    {{ $tab['label'] }}
                </a>
            </li>
        @endforeach
    </ul>
</div>

{{ $slot }}