<template>
  <view class="stat-item">
    <text v-if="icon" class="stat-item__icon">{{ icon }}</text>
    <text class="stat-item__label">{{ label }}</text>
    <text class="stat-item__value" :style="{ color }">{{ value }}</text>
  </view>
</template>

<script setup>
defineProps({
  label: String,
  value: [Number, String],
  icon: String,
  color: { type: String, default: '#e0e0e0' }
})
</script>

<style lang="scss" scoped>
.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;

  &__icon { font-size: 28rpx; }
  &__label { color: $text-secondary; }
  &__value { font-weight: bold; }
}
</style>
