@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:mt-12">
        <div class="hidden bg-gainsboro px-1 sm:px-2 xl:flex font-bold items-center justify-between mx-auto relative rounded-46xl
            text-base sm:text-xl text-brand-brown 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-brand-yellow border-brand-brown'
                        : 'border-transparent'"
                    class="pointer my-1.5 px-2 py-1 sm:px-8 sm:py-4 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-brand-brown transition-opacity disabled:opacity-0"
                :disabled="!showLeft">
                <x-icons.arrow-left />
            </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 border-brand-brown text-brand-brown 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-brand-brown transition-opacity disabled:opacity-0"
                :disabled="!showRight">
                <x-icons.arrow-right />
            </button>
        </div>
    </div>
    @foreach($abas as $aba)
        <div class="max-sm:[&>*:first-child]:!mt-0" 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"
            />
        </div>
    @endforeach
</div>