<script setup lang="ts">
import { computed } from 'vue'
import type {PlayerQueue} from "@/types/GameSubTypes.ts";

const props = defineProps<{
  queue: PlayerQueue
}>()

const safeNextPlayers = computed(() => props.queue.players ?? [])
</script>

<template>
  <q-card flat class="turn-tracker-container q-pa-md">
    <q-card-section>
      <div class="text-subtitle2 q-mb-xs">Current Player</div>
      <div id="current-player-name" class="text-h6 text-weight-bold text-positive">{{
          props.queue.currentPlayer?.name
        }}</div>

      <div v-if="safeNextPlayers.length > 0" class="q-mt-md">
        <div id="next-players-text" class="text-subtitle2 q-mb-xs">Next Players</div>
        <q-list id="next-players-container" dense>
          <q-item v-for="player in safeNextPlayers" :key="player.id">
            <q-item-section>
              <div class="text-body1 text-primary">{{ player.name }}</div>
            </q-item-section>
          </q-item>
        </q-list>
      </div>
    </q-card-section>
  </q-card>
</template>

<style scoped>
.turn-tracker-container {
  max-width: 320px;
}
</style>
