<script setup lang="ts">
import {Flight, UserActionChange} from "@/Types/types";
import GenericFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/GenericFieldChange.vue";
import {computed} from "vue";

const props = defineProps<{
    change: UserActionChange
    label: string
    original: Flight
    updated: Flight
}>()

const displayField = computed(() =>
    props.change.field === 'departure_date' ? 'departure_date_display' : 'arrival_date_display'
)

const timeField = computed(() =>
    props.change.field === 'departure_date' ? 'departure_time_display' : 'arrival_time_display'
)
</script>

<template>
    <GenericFieldChange :label="label">
        <template #from>{{ (original as any)[displayField] }} at {{ (original as any)[timeField] }}</template>
        <template #to>{{ (updated as any)[displayField] }} at {{ (updated as any)[timeField] }}</template>
    </GenericFieldChange>
</template>
