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

const props = defineProps<{
  item: MultiCityInspirationItem
  currency?: string
  resolveCountry?: (iata: string) => string
}>()

defineEmits<{ select: [item: MultiCityInspirationItem] }>()

const countrySummary = computed(() => {
  if (!props.resolveCountry) return ''
  const unique = [...new Set(props.item.stops.map(s => props.resolveCountry!(s)).filter(Boolean))]
  return unique.join(', ')
})

</script>

<template>
  <UCard class="hover:ring-primary-500 transition-all cursor-pointer" @click="$emit('select', item)">
    <div class="flex items-center justify-between">
      <div>
        <p class="font-semibold text-sm">
          {{ item.from }} → {{ item.stops.join(' → ') }}
        </p>
        <p class="text-xs text-muted mt-1">
          {{ item.stops.length }} parada{{ item.stops.length !== 1 ? 's' : '' }}
          <span v-if="countrySummary"> · {{ countrySummary }}</span>
        </p>
      </div>
      <p class="text-lg font-bold text-primary-600 dark:text-primary-400">
        {{ item.minPrice.toFixed(0) }}<span class="text-xs">&euro;</span>
      </p>
    </div>
  </UCard>
</template>
