<script setup lang="ts">
import {Flight} from "@/Types/types";
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";

defineProps<{
    flight: Flight
}>()
</script>

<template>
    <Panel label="Route">
        <div class="map-placeholder">
            <FlightMap :flights="[flight]" :showLegend="false" compact />
        </div>
        <DetailRows>
            <DetailRow label="Distance" :value="flight.distance + 'km'" />
            <DetailRow label="Duration" :value="flight.duration_display" />
        </DetailRows>
    </Panel>
</template>

<style scoped>

</style>
