<script
    setup
    lang="ts"
>
    import { date } from 'quasar';    

    const { title, startDate = "", endDate = "" } = defineProps<{
        title: string;
        startDate?: string;
        endDate?: string;
    }>();

    const date_format_options = { day: 'numeric', month: 'long', year: 'numeric', };
    
</script>

<template>
    <div class="column q-mt-lg text-uppercase text-center text-weight-bolder text-h4">
        <span class="col">{{ $t(title) }}</span>

        <transition
            enter-active-class="animated fadeInDown"
            leave-active-class="animated fadeOutDown"
            mode="out-in"
        >
            <div
                :key="startDate"
                v-if="startDate.length > 0"
                class="col row flex-center full-width q-py-none q-my-none"
            >
                <div class="text-accent text-weight-bold text-h6">
                    {{ $d(date.extractDate(startDate, 'YYYY-MM-DD'), date_format_options) }}
                </div>
                <div class="text-body2 q-mx-md text-weight-medium">
                    {{ $t('shared.misc.to') }}
                </div>
                <div class="text-accent text-weight-bold text-h6">
                    {{ $d(date.extractDate(endDate, 'YYYY-MM-DD'), date_format_options) }}
                </div>
            </div>
        </transition>
    </div>
</template>