<template>
  <!-- État vide réutilisable (listes, tableaux, rapports). Optionnel : slot #action pour un bouton. -->
  <div class="empty-state">
    <q-icon :name="icon" size="44px" class="empty-icon" />
    <div class="empty-label">{{ label }}</div>
    <div v-if="hint" class="empty-hint">{{ hint }}</div>
    <div v-if="$slots.action" class="empty-action"><slot name="action" /></div>
  </div>
</template>

<script setup>
defineProps({
  icon: { type: String, default: 'inbox' },
  label: { type: String, default: 'Aucune donnée' },
  hint: { type: String, default: '' },
})
</script>

<style scoped>
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 44px 20px; text-align: center; }
.empty-icon { color: var(--ops-border); }
.empty-label { font-size: 0.95rem; font-weight: 600; color: var(--ops-text); }
.empty-hint { font-size: 0.82rem; color: var(--ops-text-muted); max-width: 44ch; }
.empty-action { margin-top: 12px; }
</style>
