<div
    x-data="{
        value: '',
        labels: {
            reliable: 'Best price (reliable)',
            price: 'Cheapest first',
            distance: 'Nearest first',
            updated: 'Recently updated',
            brand: 'Brand A–Z',
        },
        get label() {
            return this.labels[this.value] ?? 'Sort by';
        },
    }"
    x-modelable="value"
    {{ $attributes->whereStartsWith('wire:model') }}
>
    <flux:dropdown>
        <flux:button size="sm" icon:trailing="chevron-down">
            <span x-text="label">Sort by</span>
        </flux:button>

        <flux:menu>
            <flux:menu.item @click="value = 'reliable'">Best price (reliable)</flux:menu.item>
            <flux:menu.item @click="value = 'price'">Cheapest first</flux:menu.item>
            <flux:menu.item @click="value = 'distance'">Nearest first</flux:menu.item>
            <flux:menu.item @click="value = 'updated'">Recently updated</flux:menu.item>
            <flux:menu.item @click="value = 'brand'">Brand A–Z</flux:menu.item>
        </flux:menu>
    </flux:dropdown>
</div>
