<!-- Subscription end -->
<script setup lang="ts">
import Button from '../base/Button.vue';
import { AppConfigType } from '~src/admin/types';
import { inject } from 'vue';
import { useGettext } from 'vue3-gettext';

// Translations
const { $gettext } = useGettext();

// Props
const props = defineProps<{
	endTime: string;
}>();

// Account type
const isAccountFree = inject<boolean>('isAccountFree');

// Get time in correct format
const trialEndTime = new Date(props.endTime).toLocaleDateString('en-GB', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
});

// Texts
const bannerText = isAccountFree ? $gettext('Your trial period will end on') : $gettext('Your subscription will end on');
const buttonText = isAccountFree ? $gettext('UPGRADE') : $gettext('RENEW SUBSCRIPTION');
</script>

<template>
    <div
        class="w-full flex items-center justify-center gap-2.5 bg-danger-100 py-3"
        v-if="endTime"
    >
        <p class="text-[13px] leading-xs text-base-500 font-medium">
            {{ bannerText }} {{ trialEndTime }}
        </p>
        <Button class="rounded-full" :text="buttonText" type="secondary" size="small" />
    </div>
</template>

<style scoped></style>
