<template>
  <view :class="`bg-${color}-500 rounded-lg p-3 text-white`">
    <view class="text-sm">{{ title }}</view>
    <view class="flex justify-between items-center">
      <view class="text-lg font-bold mt-1">
        <wd-count-to
          :start-val="0"
          :end-val="value"
          :duration="duration"
          :decimals="decimals"
          :suffix="suffix"
          color="#ffffff"
        ></wd-count-to>
      </view>
      <view class="text-white">
        <wd-icon name="arrow-right" size="18px"></wd-icon>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  title: {
    type: String,
    required: true,
  },
  value: {
    type: Number,
    required: true,
  },
  suffix: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: 'blue',
  },
  duration: {
    type: Number,
    default: 2000,
  },
  decimals: {
    type: Number,
    default: 0,
  },
})
</script>
