<template>
  <component
    :is="linkable ? NuxtLink : 'div'"
    :to="linkable ? localePath(`/catalog/hubs/${hub.uuid}`) : undefined"
    class="block"
    :class="{ 'cursor-pointer': selectable }"
    @click="selectable && $emit('select')"
    @mouseenter="$emit('hover', true)"
    @mouseleave="$emit('hover', false)"
  >
    <Card
      padding="small"
      :interactive="linkable || selectable"
      :class="[
        isSelected && 'ring-2 ring-primary ring-offset-2'
      ]"
    >
      <div class="flex flex-col gap-1">
        <!-- Title -->
        <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
        <!-- Country left, distance right -->
        <div class="flex items-center justify-between">
          <Text tone="muted" size="sm">
            {{ countryFlag }} {{ hub.country || t('catalogMap.labels.country_unknown') }}
          </Text>
          <span v-if="hub.distance" class="badge badge-neutral badge-dash text-xs">
            {{ hub.distance }}
          </span>
        </div>
      </div>
    </Card>
  </component>
</template>

<script setup lang="ts">
import { NuxtLink } from '#components'

interface Hub {
  uuid?: string | null
  name?: string | null
  country?: string | null
  countryCode?: string | null
  distance?: string
}

const props = defineProps<{
  hub: Hub
  selectable?: boolean
  isSelected?: boolean
}>()

defineEmits<{
  (e: 'select'): void
  (e: 'hover', hovered: boolean): void
}>()

const localePath = useLocalePath()
const { t } = useI18n()

const linkable = computed(() => !props.selectable && props.hub.uuid)

// ISO code to emoji flag
const isoToEmoji = (code: string): string => {
  return code.toUpperCase().split('').map(char => String.fromCodePoint(0x1F1E6 - 65 + char.charCodeAt(0))).join('')
}

const countryFlag = computed(() => {
  if (props.hub.countryCode) {
    return isoToEmoji(props.hub.countryCode)
  }
  return '🌍'
})
</script>
