<script setup>
import AppPanel from "../../../Components/AppPanel.vue";
import {NNumberAnimation, NStatistic} from "naive-ui";

const props = defineProps({
    counter: {
        type: [String, Number],
        default: null
    },
    isDoubleCounter: {
        type: Boolean,
        default: false
    },
    counterSuffix: {
        type: [String, Number],
        default: null
    },
    percent: {
        type: Boolean,
        default: false
    }
})
</script>

<template>
    <AppPanel class="min-w-[120px] min-h-[100px] max-h-[102px] h-full"
              style="--n-padding-top: 0; --n-padding-bottom: 0; --n-padding-left: 8px; --n-padding-right: 8px;">
        <div class="w-full h-full flex flex items-center justify-center">
            <NStatistic class="text-center">
                <template #label>
                    <slot />
                </template>
                <template v-if="isDoubleCounter">
                    <NNumberAnimation :from="0" :to="counter" />
                    <span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
                    <span style="color: var(--n-close-icon-color)"> / </span>
                    <NNumberAnimation :from="0" :to="counterSuffix" />
                    <span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
                </template>
                <NNumberAnimation v-else :from="0" :to="counter" />
                <span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
            </NStatistic>
        </div>
    </AppPanel>
</template>

<style scoped>

</style>
