<script setup lang="ts">
const props = defineProps<{
  modelValue: { adult: number; child: number; infant: number }
}>()

const emit = defineEmits<{
  'update:modelValue': [value: { adult: number; child: number; infant: number }]
}>()

function update(key: 'adult' | 'child' | 'infant', delta: number) {
  const val = { ...props.modelValue }
  val[key] = Math.max(key === 'adult' ? 1 : 0, val[key] + delta)
  emit('update:modelValue', val)
}

const total = computed(() => props.modelValue.adult + props.modelValue.child + props.modelValue.infant)
</script>

<template>
  <div class="space-y-2">
    <div v-for="type in (['adult', 'child', 'infant'] as const)" :key="type" class="flex items-center justify-between">
      <span class="text-sm capitalize text-neutral-600 dark:text-neutral-400">
        {{ type === 'adult' ? 'Adultos' : type === 'child' ? 'Ninos' : 'Bebes' }}
      </span>
      <div class="flex items-center gap-2">
        <UButton size="xs" icon="i-lucide-minus" color="neutral" variant="outline" :disabled="type === 'adult' ? modelValue[type] <= 1 : modelValue[type] <= 0" @click="update(type, -1)" />
        <span class="w-6 text-center text-sm font-medium">{{ modelValue[type] }}</span>
        <UButton size="xs" icon="i-lucide-plus" color="neutral" variant="outline" @click="update(type, 1)" />
      </div>
    </div>
    <p class="text-xs text-neutral-500">{{ total }} pasajero{{ total !== 1 ? 's' : '' }}</p>
  </div>
</template>
