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

@php
    $normalized = collect($tabs)
        ->map(fn ($tab) => [
            'key' => (string) ($tab['key'] ?? ''),
            'label' => (string) ($tab['label'] ?? ''),
        ])
        ->filter(fn ($tab) => $tab['key'] !== '' && $tab['label'] !== '')
        ->values();
    $initial = $initial ?? ($normalized->first()['key'] ?? '');
@endphp

@if ($normalized->isNotEmpty())
    <div
        {{ $attributes->class(['site-detail-tabs eca-detail-glass']) }}
        x-data="{ tab: @js($initial) }"
        data-reveal="section"
    >
        <div class="site-detail-tabs__nav eca-theme-border" role="tablist">
            @foreach ($normalized as $tabDef)
                <button
                    type="button"
                    role="tab"
                    class="site-detail-tabs__tab eca-theme-text-muted"
                    :class="{ 'site-detail-tabs__tab--active': tab === @js($tabDef['key']) }"
                    :aria-selected="(tab === @js($tabDef['key'])).toString()"
                    @click="tab = @js($tabDef['key'])"
                >{{ $tabDef['label'] }}</button>
            @endforeach
        </div>

        <div class="site-detail-tabs__panels">
            {{ $slot }}
        </div>
    </div>
@endif