<script setup lang="ts">
import { MissingAirline } from "@/Types/types"

defineProps<{
    airline: MissingAirline
}>()
</script>

<template>
    <div class="missing-airline-card">
        <div class="card-header">
            <span class="airline-code">{{ airline.code }}</span>
            <span class="flight-count">{{ airline.flights.length }} flight{{ airline.flights.length === 1 ? '' : 's' }}</span>
        </div>

        <ul class="flight-list">
            <li v-for="flight in airline.flights" :key="flight.link" class="flight-item">
                <a :href="flight.link" class="flight-link" target="_blank" rel="noopener">
                    {{ flight.flight_number }}
                </a>
            </li>
        </ul>
    </div>
</template>

<style scoped>
.missing-airline-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 0.5rem;
}

.airline-code {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: #ffc107;
    font-weight: 700;
}

.flight-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #778;
}

.flight-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.flight-item {
    display: flex;
}

.flight-link {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #9fb3c8;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.flight-link:hover {
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.4);
}
</style>
