<template>
  <!-- Tuile de statistique réutilisable (rapports + tableau de bord). À placer dans une grille responsive,
       p.ex. <div class="col-6 col-sm-auto"> → 2 par ligne sur téléphone, en ligne sur ordinateur. -->
  <div class="ops-card ops-stat stat-card">
    <q-icon v-if="icon" :name="icon" :color="color" size="20px" class="stat-card-icon" />
    <div class="ops-stat-value" :class="valueClass">
      <slot>{{ value }}</slot>
    </div>
    <div class="ops-stat-label">{{ label }}</div>
    <div v-if="hint" class="stat-card-hint">{{ hint }}</div>
  </div>
</template>

<script setup>
defineProps({
  label: { type: String, default: '' },
  value: { type: [String, Number], default: '' },
  icon: { type: String, default: '' },
  color: { type: String, default: 'primary' },
  hint: { type: String, default: '' },
  valueClass: { type: String, default: '' }, // ex. 'text-positive' / 'text-negative'
})
</script>

<style scoped>
.stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: 100%; }
.stat-card-icon { margin-bottom: 2px; }
.stat-card-hint { font-size: 0.72rem; color: var(--ops-text-muted); margin-top: 2px; }
</style>
