<script setup lang="ts">
import { computed } from 'vue'
import { FlightStats } from '@/Composables/useFlightStats'
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue"
import FlightStatsBar from "@/Components/FlightsGoneBy/FlightStatsBar.vue"
import FlightCharts from "@/Components/FlightsGoneBy/FlightCharts.vue"

const props = defineProps<{
    stats: FlightStats
    canEdit: boolean
}>()

const mappedFlights = computed(() => [
    ...props.stats.pastFlights.value,
    ...props.stats.upcomingFlights.value,
])
</script>

<template>
    <div>
        <FlightMap :flights="mappedFlights" />
        <FlightStatsBar :flights="stats.pastFlights.value" :upcoming-flights="stats.upcomingFlights.value" />
        <FlightCharts :stats="stats" :flight-stats="stats" />
    </div>
</template>
