<template>
  <ul class="steps steps-horizontal text-xs w-full">
    <li
      v-for="(stage, index) in stages"
      :key="index"
      class="step step-primary"
      :data-content="getTransportIcon(stage.transportType)"
    >
      {{ formatDistance(stage.distanceKm) }} км
    </li>
  </ul>
</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':
    case 'auto':
    default:
      return '🚛'
  }
}

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