<script setup lang="ts">

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

defineProps<{
    airline: Airline
}>()
</script>

<template>
    <Panel label="Airline">
        <div class="airline-header">
            <AirlineLogo :airline="airline" class="airline-logo" />
            <div>
                <PanelHeader>{{ airline.name }}</PanelHeader>
                <PanelSubHeader v-if="airline.country?.name"><span class="fi" :class="`fi-${airline.country.code.toLowerCase()}`"></span> {{ airline.country.name }}</PanelSubHeader>
            </div>
        </div>
        <DetailRows>
            <DetailRow v-if="airline.alliance?.name" label="Alliance" :value="airline.alliance.name" variant="Alliance" :alliance="airline.alliance" />
            <DetailRow label="IATA" v-if="airline.iata_code" :value="airline.iata_code" variant="Badge" />
            <DetailRow label="ICAO" v-if="airline.iata_code" :value="airline.icao_code" variant="Badge" />
        </DetailRows>
    </Panel>

</template>

<style scoped>
.airline-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
</style>
