<script setup lang="ts">
import type { InspirationItem } from '~/server/utils/flightics'

defineProps<{
  items: InspirationItem[]
  from: string
  loading: boolean
}>()

defineEmits<{ select: [iata: string] }>()

const budget = ref(100)
</script>

<template>
  <UCard>
    <template #header>
      <div class="flex items-center justify-between">
        <h3 class="font-semibold">Donde por {{ budget }}&euro;?</h3>
        <UBadge
          :label="`${items.filter(i => i.minPrice <= budget).length} destinos`"
          color="primary"
          size="xs"
        />
      </div>
    </template>

    <div class="mb-4">
      <URange v-model="budget" :min="15" :max="500" :step="5" />
    </div>

    <div v-if="loading" class="grid grid-cols-2 md:grid-cols-3 gap-2">
      <USkeleton v-for="i in 6" :key="i" class="h-12" />
    </div>

    <div v-else class="grid grid-cols-2 md:grid-cols-3 gap-2">
      <button
        v-for="item in items.filter(i => i.minPrice <= budget).slice(0, 12)"
        :key="item.to[0]"
        class="flex items-center justify-between px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-700 hover:border-primary-400 transition-colors text-left text-sm"
        @click="$emit('select', item.to[0])"
      >
        <span>
          <span class="font-semibold">{{ from }} → {{ item.to[0] }}</span>
          <span v-if="item.minStops === 0" class="text-xs text-muted ml-1">directo</span>
        </span>
        <span class="font-bold text-primary-600 dark:text-primary-400">
          {{ item.minPrice.toFixed(0) }}&euro;
        </span>
      </button>
    </div>

    <div v-if="items.filter(i => i.minPrice <= budget).length === 0 && !loading" class="text-center py-4 text-sm text-muted">
      Sube el presupuesto para ver destinos
    </div>
  </UCard>
</template>
