@props(['tabs' => [], 'size' => 'md'])
@php
    $sizeClasses = match($size) {
        'lg'    => 'text-[36px] font-extrabold [--slide-h:5px]',
        default => 'text-xl font-bold [--slide-h:3px]',
    };
@endphp

{{--
    Usage:
    <x-ui.tabs :tabs="[
        ['id' => 'description', 'label' => 'Description'],
        ['id' => 'info',        'label' => 'Additional information'],
        ['id' => 'reviews',     'label' => 'Reviews (0)'],
    ]">
        <x-slot name="description">...</x-slot>
        <x-slot name="info">...</x-slot>
        <x-slot name="reviews">...</x-slot>
    </x-ui.tabs>
--}}

<div data-controller="tabs" {{ $attributes }}>
    <div class="flex gap-10 mb-8" role="tablist">
        @foreach($tabs as $i => $tab)
            <button
                type="button"
                role="tab"
                data-tabs-target="button"
                data-action="click->tabs#show"
                data-panel="{{ $tab['id'] }}"
                class="underline-slide font-display pb-1 {{ $sizeClasses }} {{ $i === 0 ? 'is-active' : '' }}"
                aria-selected="{{ $i === 0 ? 'true' : 'false' }}"
                aria-controls="tab-panel-{{ $tab['id'] }}"
                id="tab-btn-{{ $tab['id'] }}"
            >{{ $tab['label'] }}</button>
        @endforeach
    </div>

    @foreach($tabs as $i => $tab)
        @php $panelKey = $tab['id']; $panel = $$panelKey ?? null; @endphp
        <div
            role="tabpanel"
            data-tabs-target="panel"
            id="tab-panel-{{ $tab['id'] }}"
            aria-labelledby="tab-btn-{{ $tab['id'] }}"
            tabindex="0"
            @if($i !== 0) hidden @endif
        >{{ $panel }}</div>
    @endforeach
</div>