<script setup lang="ts">
import {Flight} from "@/Types/types";
import BoardingPass from "@/Components/FlightsGoneBy/BoardingPasses/BoardingPass.vue";
import FlightBadge from "@/Components/FlightsGoneBy/FlightBadge.vue";
import {computed} from "vue";

const props = defineProps<{
    flight: Flight
    action: 'flight_departing' | 'flight_arriving'
}>()

const actionText = computed(() => props.action === 'flight_departing' ? 'departed' : 'landed')

</script>

<template>
    <div class="flight-booked">
        <span class="flight-summary">
            Flight <FlightBadge :flight="flight" /> from {{flight.departure_airport.municipality}} to {{flight.arrival_airport.municipality}} has {{actionText}}.
        </span>
    </div>
</template>

<style scoped>
.flight-booked {
    padding: 0.75rem 1.25rem;
}

.flight-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #9ca3af;
}
</style>
