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

{{-- Segmented control. Real state, not links: each writes a #[Url] property so
     the tab survives a refresh and a shared link opens where the sender was. --}}
<div role="tablist" class="mb-4 flex gap-1 rounded-xl p-1" style="background: color-mix(in oklab, var(--portal-border) 45%, transparent);">
    @foreach($tabs as $key => $label)
        <button type="button" role="tab"
                wire:click="$set('{{ $property }}', '{{ $key }}')"
                aria-selected="{{ $active === $key ? 'true' : 'false' }}"
                class="flex-1 rounded-lg px-2 py-2 text-xs font-semibold transition-colors"
                style="{{ $active === $key
                    ? 'background: var(--portal-surface); color: var(--portal-link); box-shadow: 0 1px 2px rgba(0,0,0,.06);'
                    : 'color: var(--portal-muted);' }}">
            {{ $label }}
        </button>
    @endforeach
</div>
