<div
    x-data="{
        value: '',
        labels: {
            1: '1 mile',
            2: '2 miles',
            5: '5 miles',
            10: '10 miles',
            20: '20 miles',
        },
        get label() {
            return this.labels[this.value] ?? 'Radius';
        },
    }"
    x-modelable="value"
    {{ $attributes->whereStartsWith('wire:model') }}
>
    <flux:dropdown>
        <flux:button size="sm" icon:trailing="chevron-down">
            <span x-text="label">Radius</span>
        </flux:button>

        <flux:menu>
            <flux:menu.item @click="value = 1">1 mile</flux:menu.item>
            <flux:menu.item @click="value = 2">2 miles</flux:menu.item>
            <flux:menu.item @click="value = 5">5 miles</flux:menu.item>
            <flux:menu.item @click="value = 10">10 miles</flux:menu.item>
            <flux:menu.item @click="value = 20">20 miles</flux:menu.item>
        </flux:menu>
    </flux:dropdown>
</div>
