<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;
}

.airline-logo-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--accent-glow);
    border: 1px solid rgba(56, 189, 248, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-family: 'Share Tech Mono', monospace;
    color: var(--accent);
    flex-shrink: 0;
}

.airline-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

</style>
