<script
    setup
    lang="ts"
>
    import { computed } from 'vue';
    import { date, useQuasar } from 'quasar';
    
    const q = useQuasar();
    const { extractDate } = date;

    const { displayDate, dense = false, approved = false} = defineProps<{
        displayDate: string;
        dense?: boolean;
        approved?: boolean;
    }>();

    const is_mobile = computed(() => q.screen.lt.md);
    const date_font_size = computed(() => dense ? '1.5em' : '2.5em');
    const weekday_font_size = computed(() => dense ? '0.55em;' : '0.7em;');
    const date_box_size = computed(() => dense || is_mobile.value ? 'width: 40px; height: 75px;' : 'width: 75px; height: 75px;');

    const display_date = extractDate(displayDate, 'YYYY-MM-DD');
</script>

<template>
    <div
        class="column flex-center rounded-10 text-center self-center bg-transparent"
        :style="date_box_size"
    >
        <span
            v-if="!dense"
            class="col-auto text-uppercase text-weight-bold"
            :class="approved ? 'text-white' : ''"
            :style="'font-size: ' + weekday_font_size"
        >
            {{ $d(display_date, { weekday: $q.screen.lt.md ? 'short' : 'long'}) }}
        </span>
        <span
            class="col-auto text-weight-bolder"
            :class="approved ? 'text-white' : ''"
            :style="'font-size: ' + date_font_size + '; line-height: 90% !important;'"
        >
            {{ display_date.getDate() }}
        </span>
        <span
            class="col-auto text-uppercase text-weight-bold"
            :class="approved ? 'text-white' : ''"
            :style="'font-size: ' + weekday_font_size"
        >
            {{ $d(display_date, { month: $q.screen.lt.md ? 'short' : 'long' }) }}
        </span>
    </div>
</template>