<template>
    <AirportToolTip :airport="airport">
        <div class="airport-marker arrival">
            <div class="airport-marker__dot" />
            <div class="airport-marker__ring" />
        </div>
    </AirportToolTip>
</template>

<script setup lang="ts">
import type {Airport} from "@/Types/types";
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";

defineProps<{
    airport: Airport
}>()
</script>

<style>
.airport-marker {
    position: relative;
    width: 16px;
    height: 16px;
}

/* ── arrival ────────────────────────────────────────────────────────────────── */
.airport-marker.arrival .airport-marker__dot {
    position: absolute;
    inset: 4px;
    background: #4da6ff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(77, 166, 255, 0.8);
}
.airport-marker.arrival .airport-marker__ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(77, 166, 255, 0.5);
    border-radius: 50%;
    animation: pm-pulse 2.2s ease-out infinite;
}

/* ── departure ──────────────────────────────────────────────────────────────── */
.airport-marker.departure {
    width: 10px;
    height: 10px;
}
.airport-marker.departure .airport-marker__dot {
    position: absolute;
    inset: 0;
    background: #ff9f4a;
    border-radius: 50%;
    border: 2px solid rgba(255, 159, 74, 0.4);
    box-shadow: 0 0 8px rgba(255, 159, 74, 0.6);
}

@keyframes pm-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(2.5); opacity: 0;   }
}
</style>
