<template>
  <aside class="MoodDropdown">
    <button
      v-for="[moodName, mood] in availableMoods"
      :key="mood.label"
      :style="{
        '--background': `var(--clr-${mood.color}-light)`,
        '--color': `var(--clr-${mood.color}-dark)`,
      }"
      @click="changeMood(moodName)"
    >
      <Icon class="icon" :name="`mingcute:${mood.icon}`" mode="svg" />
      <span>{{ mood.label }}</span>
    </button>
  </aside>
</template>

<script setup lang="ts">
import { type Mood, moods, type PossibleMood } from '../../shared/moods'

const availableMoods = computed<[PossibleMood, Mood][]>(() => Object.entries(moods))

const emit = defineEmits(['changeMood'])

const changeMood = (newMood : PossibleMood) => {
  emit('changeMood', newMood)
}
</script>