@props([
    'tabs' => [],
    'activeTab' => 'showTab',
    'variant' => 'minimal'
])

<div {{ $attributes->merge(['class' => "tab-navigation tab-navigation-{$variant}"]) }}>
    @foreach($tabs as $index => $tab)
        <button 
            type="button"
            class="tab-item" 
            x-bind:class="{'active': {{ $activeTab }} == {{ $tab['id'] ?? $index + 1 }}}"
            x-on:click="
                {{ $activeTab }} = {{ $tab['id'] ?? $index + 1 }};
                if(!loaded.includes({{ $activeTab }}) && {{ isset($tab['onclick']) ? 1 : 0 }}) {
                    loaded.push({{ $activeTab }});
                    {!! $tab['onclick'] ?? 'return' !!};
                }
            "
            @if(isset($tab['disabled']) && $tab['disabled']) disabled @endif
        >
            @if(isset($tab['icon']))
                <x-ui.nicon :name="$tab['icon']" class="tab-icon" />
            @endif
            <span class="tab-label">{{ $tab['label'] }}</span>
            @if(isset($tab['badge']))
                <span class="tab-badge">{{ $tab['badge'] }}</span>
            @endif
        </button>
    @endforeach
</div>