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

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

<template>
    <Panel label="Aircraft">
        <LiveryImage :flight="flight" />
        <PanelHeader>{{ flight.aircraft?.display_name_short }}</PanelHeader>
        <PanelSubHeader v-if="flight.aircraft?.manufacturer_code">{{ flight.aircraft.manufacturer_code }}</PanelSubHeader>
        <PanelSubHeader v-if="!flight.aircraft && !flight.aircraft_registration">No Aircraft Information Found</PanelSubHeader>
        <DetailRows>
            <DetailRow v-if="flight.aircraft?.designator" label="Designator" :value="flight.aircraft.designator" variant="Badge" />
            <DetailRow v-if="flight.aircraft_registration" label="Registration" :value="flight.aircraft_registration" />
            <DetailRow class="detail-row" v-if="flight.aircraft?.engine_type" label="Engine Type" :value="flight.aircraft?.engine_type" />
            <DetailRow class="detail-row" v-if="flight.aircraft?.engine_count" label="No. of Engines" :value="flight.aircraft?.engine_count.toString()" />
            <DetailRow class="detail-row" v-if="flight.aircraft?.wtc" label="Wake Turbulence Category" variant="WTC" :value="flight.aircraft?.wtc" />
        </DetailRows>
    </Panel>
</template>

<style scoped>

</style>
