<script setup lang="ts">
import {Alliance, Country} from "@/Types/types";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
import WakeTurbulence from "@/Components/FlightsGoneBy/WakeTurbulence.vue";

defineProps<{
    label: string
    value: string | null
    variant?: "Country" | "Badge" | "Alliance" | "WTC"
    country?: Country
    alliance?: Alliance
}>()
</script>

<template>
    <div class="detail-row">
        <span class="detail-key">{{label}}</span>
        <span class="detail-val" v-if="!variant">{{value ?? ''}}</span>
        <span class="detail-val" v-if="variant == 'Badge'"><InlineBadge variant="generic">{{value ?? ''}}</InlineBadge></span>
        <span class="detail-val" v-if="variant == 'Country' && country">{{country.name}} <span :class="`fi fi-${country.code.toLowerCase()}`"></span></span>
        <span class="detail-val" v-if="variant == 'Alliance' && alliance">{{alliance.name}} <AllianceLogo :alliance="alliance"/> </span>
        <span class="detail-val" v-if="variant == 'WTC'"><WakeTurbulence :value="value" /> </span>
    </div>
</template>

<style scoped>
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.detail-key {
    color: var(--muted);

}

.detail-val {
    color: var(--text);
    text-align: right;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}
</style>
