<script lang="ts" setup>
import {computed, defineProps, toRefs} from 'vue'
import type {Trick} from "@/types/GameSubTypes.ts";
const props = defineProps<{ trick: Trick }>()

const {trick } = toRefs(props)

const playedCards = computed(() => {
  return [...trick.value.cards].map(card => {
    return {
      cardId: card[1].path,
      player: card[0].name
    }
  })
})

function getCardImagePath(cardPath: string) {
  if (!cardPath) return ''
  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
  return `/${cardPath}`
}
</script>

<template>
  <div class="row items-center justify-center q-gutter-sm" id="trick-cards-content">
    <div v-for="(play, index) in playedCards" :key="index" class="col-auto">
      <q-card flat class="bg-transparent trick-card" style="width: 7rem; backdrop-filter: blur(4px);">
        <q-card-section class="q-pa-sm q-pb-xs">
          <q-img :src="getCardImagePath(play.cardId)" alt="card" style="border-radius: 6px; width:100%" />
        </q-card-section>
        <q-card-section class="q-pa-sm q-pt-xs text-center bg-transparent">
          <div class="text-subtitle2 text-grey-7">{{ play.player }}</div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<style scoped>
.trick-card {
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
</style>
