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

const props = defineProps<{
  trumpsuit: Card
  firstCard: Card | null
}>()
const {trumpsuit, firstCard} = toRefs(props)



const trumpName = computed(() => {
  switch (trumpsuit.value.identifier.charAt(1) as string) {
    case 'S':
      return 'Spades'
    case 'H':
      return 'Hearts'
    case 'D':
      return 'Diamonds'
    case 'C':
      return 'Clubs'
    default:
      return 'Unknown'
  }
})

</script>

<template>
  <div>
    <div class="q-mb-sm">
      <div class="text-h6 q-mb-xs q-font-medium">Trumpsuit</div>
      <div id="trumpsuit" class="text-h5 text-primary">{{ trumpName }}</div>
    </div>

    <div class="q-mt-md">
      <div class="text-subtitle1 q-mb-xs q-font-medium">First Card</div>
      <div id="first-card-container" class="q-pa-sm rounded shadow-2"
           style="display:inline-block;">
        <q-img v-if="firstCard" :src="firstCard.path" alt="First Card" class="firstbox"
               style="width: 80px; border-radius: 6px;"/>
        <q-img v-else src="/images/cards/1B.png" alt="First Card" class="firstbox"
               style="width: 80px; border-radius: 6px;"/>
      </div>
    </div>
  </div>
</template>

<style scoped>
.firstbox {
  width: 80px;
  border-radius: 6px;
}
</style>
