<script setup lang="ts">
import {Flight, UserActionFlightCancelledData} from "@/Types/types";
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
import BoardingPass from "@/Components/FlightsGoneBy/BoardingPasses/BoardingPass.vue";

const props = defineProps<{
    data: UserActionFlightCancelledData
}>()

</script>

<template>
    <div class="flight-booked">
        <div class="cancelled-flight">
                <span v-if="data.flight.flight_number" class="flight-summary">
                    <AirlineLogo :airline="data.flight.airline" />
                    <span>Flight <strong>{{ data.flight.flight_number }}</strong> on {{ data.flight.departure_date_display }} at {{ data.flight.departure_time_display }}</span>
                </span>
                    <span v-else class="flight-summary">
                    <AirlineLogo :airline="data.flight.airline" />
                    <span>Flight from {{ data.flight.departure_airport.municipality }} ({{ data.flight.departure_airport.display_code }}) → {{ data.flight.arrival_airport.municipality }} ({{ data.flight.arrival_airport.display_code }}) on {{ data.flight.departure_date_display }} at {{ data.flight.departure_time_display }}</span>
                </span>
        </div>
    </div>
</template>

<style scoped>

.cancelled-flight {
    padding: 0.75rem 1.25rem;
    text-decoration: line-through;
}

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

.flight-summary strong {
    color: #f9fafb;
    font-weight: 600;
}
</style>
