<script setup lang="ts">

import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
import Mono from "@/Components/FlightsGoneBy/Mono.vue";
import {Airport, Flight} from "@/Types/types";
import DayDifference from "@/Components/FlightsGoneBy/DayDifference.vue";

defineProps<{
    airport: Airport
    right?: boolean
    dayDifference?: number
    date: string
    time: string
}>()
</script>

<template>
    <div class="pass-endpoint" :class="{'pass-endpoint--right': right}">
        <AirportToolTip :airport="airport">
            <div class="pass-iata">{{ airport.display_code}}</div>
        </AirportToolTip>
        <div class="pass-endpoint-city">{{ airport.municipality }}</div>
        <Mono dark smaller>{{ date }}</Mono>
        <Mono>{{ time }}<DayDifference v-if="right" :value="dayDifference ?? 0" /></Mono>
    </div>
</template>

<style scoped>
.pass-endpoint {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pass-endpoint--right {
    text-align: right;
    align-items: flex-end;
}

.pass-iata {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #f0f2f5;
    letter-spacing: 0.02em;
    line-height: 1;
}

.pass-endpoint-city {
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
    color: #778899;
    font-weight: 500;
    white-space: nowrap;
}
</style>
