<template>
  <!-- Bulle d'aide contextuelle : petit ⓘ qui explique une fonction / une action.
       Utilise q-tooltip → régi par le boot app-wide tooltip-ux (clic = masque, jamais 2 bulles). -->
  <q-icon
    :name="icon"
    :size="size"
    class="help-hint"
    tabindex="0"
    role="button"
    :aria-label="aria || 'Aide'"
  >
    <q-tooltip
      class="help-hint-tt"
      :max-width="maxWidth"
      anchor="top middle"
      self="bottom middle"
      :offset="[0, 6]"
      :delay="150"
    >
      <div v-if="title" class="help-hint-title">{{ title }}</div>
      <div class="help-hint-body"><slot>{{ text }}</slot></div>
    </q-tooltip>
  </q-icon>
</template>

<script setup>
defineProps({
  // Texte simple ; sinon passer du contenu riche via le slot par défaut.
  text: { type: String, default: '' },
  // Titre optionnel en gras au-dessus du texte.
  title: { type: String, default: '' },
  icon: { type: String, default: 'info_outline' },
  size: { type: String, default: '15px' },
  maxWidth: { type: String, default: '280px' },
  aria: { type: String, default: '' },
})
</script>

<style scoped>
.help-hint {
  color: var(--ops-muted, #94a3b8);
  cursor: help;
  vertical-align: middle;
  transition: color 0.12s ease;
}
.help-hint:hover,
.help-hint:focus-visible {
  color: var(--ops-accent, #0c8f9e);
  outline: none;
}
.help-hint-tt {
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 11px;
}
.help-hint-title {
  font-weight: 700;
  margin-bottom: 3px;
}
.help-hint-body :deep(b) { font-weight: 700; }
.help-hint-body :deep(ul) { margin: 4px 0 0; padding-left: 16px; }
.help-hint-body :deep(li) { margin: 2px 0; }
</style>
