<template>
  <div class="h-full p-4 pt-0">
    <transition name="fade" mode="out-in">
      <div v-if="game.sortedInteractionQueue.length === 0" class="h-full flex flex-col justify-center items-center gap-4 p-6">
        <div class="text-xl text-center text-gray-200">
          Noch keine Interaktionen zum Abstimmen vorhanden.
        </div>
        <button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-800 text-lg" @click="emit('switch-screen', 'interactions')">
          <ArrowRightIcon/>
          <span class="relative top-1px">Interagieren</span>
        </button>
      </div>
      <transition-group v-else tag="div" name="list" class="flex flex-col gap-4 relative">
        <InteractionQueueItemCard
            v-for="(item, index) in game.sortedInteractionQueue"
            :key="item.id"
            :style="{ zIndex: 1000 - index }"
            :item="item"
            mode="audience"
        />
      </transition-group>
    </transition>
  </div>
</template>

<style scoped lang="scss">

</style>

<script setup lang="ts">
  import InteractionQueueItemCard from "../components/InteractionQueueItemCard.vue"
  import { useGame } from "../game"
  import ArrowRightIcon from "virtual:icons/ph/arrow-right"

  const emit = defineEmits<{
    "switch-screen": [string]
  }>()

  const game = useGame()
</script>