<template>
  <section class="CurrentMood">
    <h1>Du bist derzeit</h1>
    <span>{{ moods[currentMood].label }}</span>
    <Icon class="icon" :name="`mingcute:${moods[currentMood].icon}`" mode="svg" />
  </section>
  <MoodDropdown
    @change-mood="changeMood"
  />
</template>

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

const currentMood = ref<PossibleMood>('happy')
const changeMood = (newMood : PossibleMood) => {
  currentMood.value = newMood
  document.body.style.setProperty('--clr-current-dark', `var(--clr-${newMood}-dark)`)
  document.body.style.setProperty('--clr-current-light', `var(--clr-${newMood}-light)`)
}

useSeoMeta({
  title: () => `Du bist derzeit ${moods[currentMood.value].label}`
})
</script>