<template>
  <div class="stat-card">
    <div class="stat-icon">{{ icon }}</div>
    <div class="stat-content">
      <h3 class="stat-value">{{ formattedValue }}</h3>
      <p class="stat-label">{{ title }}</p>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: [Number, String],
    required: true
  },
  icon: {
    type: String,
    default: '📊'
  },
  format: {
    type: String,
    default: 'number' // 'number', 'currency', 'percentage'
  }
})

const formattedValue = computed(() => {
  const val = props.value
  
  switch (props.format) {
    case 'currency':
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      }).format(val)
    
    case 'percentage':
      return `${val}%`
    
    case 'number':
    default:
      return new Intl.NumberFormat().format(val)
  }
})
</script>

<style scoped>
/* Styles are inherited from admin.css */
</style>
