<script setup lang="ts">

import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
import { Airport } from "@/Types/types";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";

defineProps<{
    label?: string
    airport: Airport
}>()
</script>

<template>
    <Panel :label="label">
        <PanelHeader class="airport-name">{{ airport.name }}</PanelHeader>
        <PanelSubHeader>
            {{ airport.municipality }},
            {{ airport.region?.country?.name }} <span :class="`fi fi-${airport.region?.country.code.toLowerCase()}`"></span>
        </PanelSubHeader>
        <DetailRows>
            <DetailRow  v-if="airport.iata_code" label="IATA" variant="Badge" :value="airport.iata_code" />
            <DetailRow  v-if="airport.icao_code" label="ICAO" variant="Badge" :value="airport.icao_code" />
            <DetailRow label="City Served"  :value="airport.municipality" />
            <DetailRow label="Region" v-if="airport.region?.name" :value="airport.region.name" />
            <DetailRow label="Country" v-if="airport.region?.country" variant="Country" :country="airport.region.country" :value="airport.region.country.name" />
        </DetailRows>
    </Panel>
</template>

<style scoped>


</style>
