<script setup lang="ts">
const model = defineModel<string>({ default: 'roundtrip' })

const modes = [
  { value: 'roundtrip', label: 'Ida y vuelta', icon: 'i-lucide-repeat' },
  { value: 'oneway', label: 'Solo ida', icon: 'i-lucide-arrow-right' },
  { value: 'multicity', label: 'Multi-ciudad', icon: 'i-lucide-route' },
  { value: 'weekend', label: 'Finde', icon: 'i-lucide-calendar-days' },
  { value: 'explore', label: 'Explorar', icon: 'i-lucide-compass' }
]
</script>

<template>
  <div class="flex gap-1 flex-wrap">
    <UButton
      v-for="m in modes"
      :key="m.value"
      :label="m.label"
      :icon="m.icon"
      :color="model === m.value ? 'primary' : 'neutral'"
      :variant="model === m.value ? 'solid' : 'ghost'"
      size="sm"
      @click="model = m.value"
    />
  </div>
</template>
