@props([
    'categories' => [], 'components' => [], 'rowMax' => 50,
])

<div
    class="bg-gray-100 p-2"
    @if ($attributes->has('wire:model'))
        x-data="{tab: @entangle($attributes->wire('model'))}"
    @else
        x-data="{tab: 0}"
    @endif
    x-init="$focus.focus($focus.focusables()[tab]);"
    x-cloak
>
    <div class="flex">
        <div class="flex-column text-sm font-medium text-gray-500 w-56">
            @foreach(collect($categories)->chunk($rowMax) as $chunk_categories)
                <div class="space-y-1">
                    @foreach($chunk_categories as $index => $category)
                        @php
                            $component = data_get($components, $index);
                        @endphp
                        <button type="button"
                                @click="tab = {{$index}};"
                                :class="tab === {{$index}} ? 'bg-white shadow-sm' : 'bg-gray-100 border-0 shadow-none'"
                                class="inline-flex items-center px-4 py-3 text-gray-900 rounded-lg hover:bg-gray-50 rounded-r-none w-full
                        ">
                            {{$category}}
                        </button>
                    @endforeach
                </div>
            @endforeach
        </div>
        <div class="p-6 bg-white text-medium rounded-lg rounded-l-none w-full">
            @for($i = 0; $i < count($categories); $i++)
                <div x-show="tab === {{$i}}">
                    {{ ${"slot_{$i}"} }}
                </div>
            @endfor
        </div>
    </div>
</div>