<script setup lang="ts">
/** Quatre pastilles rondes — une par ambiance. Ring accent sur l'actif. */
const { moods, currentMood, setMood } = useLibreMood()
</script>

<template>
  <!-- ld-v2 -->
  <div class="mood-switcher" role="group" aria-label="Ambiance">
    <UTooltip v-for="m in moods" :key="m.id" :text="m.label">
      <button
        class="mood-dot"
        :class="{ 'mood-dot--active': currentMood === m.id }"
        :style="{ background: m.color }"
        :aria-label="m.label"
        :aria-pressed="currentMood === m.id"
        @click="setMood(m.id)"
      />
    </UTooltip>
  </div>
</template>

<style scoped>
.mood-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
}

.mood-dot {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 1px 3px var(--mood-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mood-dot:hover {
  transform: translateY(-1px) scale(1.12);
}
.mood-dot:active {
  transform: translateY(0);
}
.mood-dot--active {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
    0 0 0 2px var(--mood-surface),
    0 0 0 4px var(--mood-accent);
}
</style>
