<div
    x-data="{
        value: '',
        labels: {
            petrol: 'Petrol (E10)',
            e5: 'Super Unleaded (E5)',
            diesel: 'Diesel',
            b7_premium: 'Premium Diesel',
            b10: 'B10 Biodiesel',
            hvo: 'HVO',
        },
        get label() {
            return this.labels[this.value] ?? 'Select fuel type';
        },
    }"
    x-modelable="value"
    {{ $attributes->whereStartsWith('wire:model') }}
>
    <flux:dropdown>
        <flux:button size="sm" icon:trailing="chevron-down">
            <span x-text="label">Select fuel type</span>
        </flux:button>

        <flux:menu>
            <flux:menu.item @click="value = 'petrol'">Petrol (E10)</flux:menu.item>
            <flux:menu.item @click="value = 'e5'">Super Unleaded (E5)</flux:menu.item>
            <flux:menu.item @click="value = 'diesel'">Diesel</flux:menu.item>
            <flux:menu.item @click="value = 'b7_premium'">Premium Diesel</flux:menu.item>
            <flux:menu.item @click="value = 'b10'">B10 Biodiesel</flux:menu.item>
            <flux:menu.item @click="value = 'hvo'">HVO</flux:menu.item>
        </flux:menu>
    </flux:dropdown>
</div>
