<script setup>
import AppPanel from "../../../Components/AppPanel.vue";
import {NNumberAnimation, NStatistic} from "naive-ui";
const props = defineProps({
    label: String,
    counter: {
        type: [String, Number],
        default: null
    },
    isDoubleCounter: {
        type: Boolean,
        default: false
    },
    counterSuffix: {
        type: [String, Number],
        default: null
    },
    percent: {
        type: Boolean,
        default: false
    },
    counterClass: {
        type: String
    },
    counterSuffixClass: {
        type: String
    }
})


</script>

<template>
    <AppPanel no-padding>
        <div class="flex flex-col items-center justify-center text-center py-2">
            <NStatistic :label="label">
                <template v-if="isDoubleCounter">
                    <span :class="counterClass">
                        <NNumberAnimation :from="0" :to="counter" />
                        <span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
                    </span>
                    <span style="color: var(--n-close-icon-color)"> / </span>
                    <span :class="counterSuffixClass">
                        <NNumberAnimation :from="0" :to="counterSuffix" />
                        <span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
                    </span>
                </template>
                <span v-else :class="counterClass">
                    <NNumberAnimation :from="0" :to="counter" />
                    <span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
                </span>
            </NStatistic>
        </div>
    </AppPanel>
</template>

<style scoped>

</style>
