<script setup>
defineProps({ card: Object });
import { twMerge } from "tailwind-merge";
</script>
<template>
  <div class="stats justify-start shadow bg-slate-200">
    <div class="stat w-24 p-2">
      <div class="bg-gray-600 rounded-lg p-2 shadow-lg shadow-slate-400">
        <div class="text-sm text-slate-100">{{ card.title }}</div>
      </div>
    </div>
    <div v-for="item in card.groups" :key="item.code" class="stat w-12 p-2">
      <FontAwesomeIcon
        :icon="['fas', 'circle']"
        :class="
          twMerge(
            'text-2xl border-2 border-slate-400 rounded-full',
            item.status ? item.status.trim() : 'text-slate-400'
          )
        "
      />
      <span class="text-sm text-slate-800">{{ item.code }}</span>
    </div>
  </div>
</template>
