<script setup lang="ts">
    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>

            <div
                v-if="startDate.length > 0"
                class="col row flex-center full-width q-py-none q-my-none"
            >
                <div class="text-primary text-weight-bold text-h6">
                    {{ $d(new Date(startDate), date_format_options) }}
                </div>
                <div class="text-body2 q-mx-md text-weight-medium">
                    {{ $t('shared.misc.to') }}
                </div>
                <div class="text-primary text-weight-bold text-h6">
                    {{ $d(new Date(endDate), date_format_options) }}
                </div>
            </div>
        </div>
</template>