<template>
  <div class="flex flex-wrap gap-4 justify-center">
    <Tag
        :value="card.cardType"
        :severity="getCardSeverity(card.cardType)"
    />
    <template v-if="isMonsterCard(card)">
      <Tag
          v-if="card.isPendulum"
          value="PENDULUM"
          :severity="getSeverityFromMonsterCardType(card.type)"
      />
      <Tag
          :value="card.type"
          :severity="getSeverityFromMonsterCardType(card.type)"
      />
      <Tag
          v-for="subType in card.subTypes"
          :value="subType"
          severity="secondary"
      />
    </template>
    <template v-if="isSpellCard(card)">
      <Tag
          :value="card.type"
          :severity="getSeverityFromSpellCardType(card.type)"
      />
    </template>
    <template v-if="isTrapCard(card)">
      <Tag
          :value="card.type"
          :severity="getSeverityFromTrapCardType(card.type)"
      />
    </template>
  </div>
</template><

<script setup lang="ts">
import type {Ref} from "vue";
import type {Card} from "@/api/openapi";
import {
  getCardSeverity,
  getSeverityFromMonsterCardType, getSeverityFromSpellCardType, getSeverityFromTrapCardType,
  isMonsterCard,
  isSpellCard,
  isTrapCard
} from "@/util/card-type-util.ts";

const card: Ref<Card> = defineModel({
  required: true
})
</script>

<style scoped>

</style>>`