@props(['categories' => [], 'attr' => []])
@php
    $attributes = $attributes->merge($attr)
@endphp
<div x-data="{category: @entangle($attributes->wire('model')).live}">
    <div class="sm:hidden">
        <select x-model="category" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
            @foreach($categories as $index => $category)
                <option value="{{$index}}">
                    {{$category}}
                </option>
            @endforeach
        </select>
    </div>
    <ul class="hidden text-sm font-medium text-center text-gray-600 rounded-lg w-fit shadow sm:flex">
        @foreach($categories as $index => $category)
            <li>
                <div
                    :class="category === '{{$index}}' ? 'text-gray-900 bg-primary-200' : 'bg-gray-50'"
                    @click="category = '{{$index}}'"
                    @class([
                        "inline-block w-full p-2 border-gray-200 border-r focus:ring-4 focus:ring-blue-300 focus:outline-none cursor-pointer min-w-[8rem]",
                        "rounded-s-lg" => $loop->first,
                        "rounded-e-lg" => $loop->last,
                    ])
                >
                    {{$category}}
                </div>
            </li>
        @endforeach
    </ul>
</div>