<template>
  <div class="flex items-center gap-1 flex-wrap text-xs">
    <template v-for="(stage, index) in stages" :key="index">
      <div v-if="index > 0" class="w-3 h-px bg-base-300" />
      <div class="flex items-center gap-0.5">
        <span>{{ getTransportIcon(stage.transportType) }}</span>
        <span class="text-base-content/70">{{ formatDistance(stage.distanceKm) }}км</span>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
export interface RouteStage {
  transportType?: string | null
  distanceKm?: number | null
}

defineProps<{
  stages: RouteStage[]
}>()

const getTransportIcon = (type?: string | null) => {
  switch (type) {
    case 'rail':
      return '🚂'
    case 'sea':
      return '🚢'
    case 'road':
    default:
      return '🚛'
  }
}

const formatDistance = (km?: number | null) => {
  if (!km) return '0'
  return Math.round(km).toLocaleString()
}
</script>
