@props(['class' => '', 'abas'])
@php
    $selecionada = 0;
    foreach ($abas as $indice => $segmento) {
        if ($segmento['inicial']) {
            $selecionada = $indice;
            break;
        }
    }
@endphp
<div x-data="{
    selecionada: {{ $selecionada }},
    total: {{ count($abas) }},
}">
    <div class="my-6 lg:my-12">
        <div
            class="hidden bg-white px-1 sm:px-1 xl:flex font-bold items-center justify-between mx-auto relative rounded-46xl
            text-base sm:text-xl text-on-babyblue xl:gap-4 whitespace-nowrap w-fit border-2 border-transparent">
            @foreach ($abas as $aba)
                <button
                    x-on:click="'startViewTransition' in document ? document.startViewTransition(() => selecionada = {{ $loop->index }}) : selecionada = {{ $loop->index }}"
                    x-bind:class="selecionada == {{ $loop->index }} ?
                        'bg-babyblue border-babyblue' :
                        'border-transparent'"
                    class="pointer my-1 px-2 py-1 sm:px-4 sm:py-2 border-2 border-solid rounded-full">{{ $aba['nome'] }}
                </button>
            @endforeach
        </div>
        <div class="flex items-center justify-between px-8 xl:hidden">
            <button @click="selecionada = selecionada === 0 ? selecionada = Math.max(total - 1, 0) : selecionada - 1"
                class="w-9 h-9 flex items-center justify-center rounded-full shrink-0 border-2 border-solid border-deepblue transition-opacity disabled:opacity-0 bg-white"
                :disabled="!showLeft">
                <svg xmlns="http://www.w3.org/2000/svg" width="18.414" height="14.828" viewBox="0 0 18.414 14.828">
                    <path d="M17.414 7.414h-16m0 0 6-6m-6 6 6 6" fill="none" stroke="#003ca5" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2" />
                </svg>
            </button>
            @foreach ($abas as $aba)
                <div {{ $selecionada !== $loop->index ? 'x-cloak' : '' }} x-show="selecionada == {{ $loop->index }}"
                    class="border-2 border-solid h-9 inline-flex items-center px-4 rounded-full bg-babyblue border-deepblue text-on-babyblue font-bold text-xs whitespace-nowrap">
                    {{ $aba['nome'] }}
                </div>
            @endforeach

            <button @click="selecionada = Math.abs(selecionada + 1) % total"
                class="w-9 h-9 flex items-center justify-center rounded-full shrink-0 border-2 border-solid border-deepblue transition-opacity disabled:opacity-0 bg-white"
                :disabled="!showRight">
                <svg xmlns="http://www.w3.org/2000/svg" width="18.414" height="14.828" viewBox="0 0 18.414 14.828">
                    <path d="M1 7.414h16m0 0-6-6m6 6-6 6" fill="none" stroke="#003ca5" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2" />
                </svg>
            </button>
        </div>
    </div>
    @foreach ($abas as $aba)
        <div class="max-sm:[&>*:first-child]:!mt-0 px-2 md:px-10 lg:px-20" x-show="selecionada == {{ $loop->index }}">
            <x-filament-fabricator.page-blocks.destaque :sobrancelha="$aba['sobrancelha'] ?? null" :titulo="$aba['titulo']" :descricao="$aba['descricao']"
                :imagem="$aba['imagem']" :imagem_posicao="$aba['imagem_posicao'] ?? 'left'" :imagem_tamanho="$aba['imagem_tamanho'] ?? 'md'" :preset_star="$aba['preset_star'] ?? null" :preset_star="$aba['preset_star'] ?? null"
                :is_compact="true" :hamburguer="true" />
        </div>
    @endforeach
</div>