<template>
  <div :data-blinking="isBlinking" class="overflow-hidden text-6 py-2" :class="$style.root">
    <div v-if="message.trim().length === 0" class="text-gray-400">
      Keine Nachricht vorhanden.
    </div>
    <template v-else>{{ message }}</template>
  </div>
</template>

<style module>
  .root {
    &[data-blinking="true"] {
      animation: alternate infinite 500ms ease-in-out pulse;
    }
  }

  @keyframes pulse {
    from {
      @apply bg-red-900;
    }

    to {
      @apply bg-transparent;
    }
  }
</style>

<script setup lang="ts">
  import { state } from "@/state"
  import { toRef, watch } from "vue"
  import { autoResetRef } from "@vueuse/core"

  const message = toRef(state, "message")
  const isBlinking = autoResetRef(false, 10 * 1000)

  watch(message, () => {
    isBlinking.value = message.value !== ""
  })
</script>
