<template>
  <div class="space-y-3">
    <Heading v-if="title" :level="3" weight="semibold">{{ title }}</Heading>
    <RequestRoutesMap :routes="routes" :height="height" />
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

type RouteStage = {
  fromLat?: number | null
  fromLon?: number | null
  fromName?: string | null
  toLat?: number | null
  toLon?: number | null
  toName?: string | null
  transportType?: string | null
}

type RouteWithStages = {
  stages?: Array<RouteStage | null> | null
}

defineProps({
  title: {
    type: String,
    default: ''
  },
  routes: {
    type: Array as PropType<RouteWithStages[]>,
    default: () => []
  },
  height: {
    type: Number,
    default: 320
  }
})
</script>
