@props([
    'id' => null,
    'tabs' => [],
    'default' => null,
    'label' => 'Section navigation',
])

@php
    $componentId = $id ?: 'ui-tabs-'.str()->random(8);
    $activeTab = (string) ($default ?: ($tabs[0]['id'] ?? ''));
@endphp

<div
    {{ $attributes->class('ui-tabs')->merge([
        'id' => $componentId,
        'data-ui-tabs' => true,
        'data-default-tab' => $activeTab,
    ]) }}
>
    <div class="ui-tab-list" role="tablist" aria-label="{{ $label }}">
        @foreach ($tabs as $tab)
            @php
                $tabKey = (string) ($tab['id'] ?? $loop->index);
                $isActive = $tabKey === $activeTab;
                $triggerId = $componentId.'_'.$tabKey.'_tab';
                $panelId = $componentId.'_'.$tabKey.'_panel';
            @endphp

            <button
                id="{{ $triggerId }}"
                type="button"
                @class(['ui-tab', 'is-active' => $isActive])
                role="tab"
                aria-selected="{{ $isActive ? 'true' : 'false' }}"
                aria-controls="{{ $panelId }}"
                tabindex="{{ $isActive ? '0' : '-1' }}"
                data-ui-tab-trigger="{{ $tabKey }}"
                data-state="{{ $isActive ? 'active' : 'inactive' }}"
            >
                @if (! empty($tab['icon']))
                    <x-ui.icon :name="$tab['icon']" size="15" />
                @endif
                <span>{{ $tab['label'] ?? $tabKey }}</span>
                @if (array_key_exists('badge', $tab) && $tab['badge'] !== null)
                    <span class="ui-tab-badge">{{ $tab['badge'] }}</span>
                @endif
            </button>
        @endforeach
    </div>

    <div class="ui-tab-panels">
        {{ $slot }}
    </div>
</div>