<template>
    <div class="flex flex-col items-center">
        <ele-count-up
            :end-val="value"
            type="success"
            :style="valueStyle"
            :options="options"
            :precision="2"
        />
        <ele-text class="text-20">{{ title }}</ele-text>
    </div>
</template>

<script setup>
    const props = defineProps({
        title: {
            type: String,
            default: 'Hello World'
        },
        value: {
            type: [String, Number],
            default: 0
        },
        valueStyle: {
            type: Object,
            default: () => ({ fontSize: '40px', color: '#67C23A' })
        },
        options: {
            type: Object,
            default: () => ({
                duration: 1,
                useEasing: true
            })
        }
    });
</script>
