<script setup>
const props = defineProps({ data: { type: Array, default: () => [] } });
</script>
<template>
  <div class="flex flex-col gap-3">
    <template v-if="props.data.length">
      <div
        v-for="(item, index) in props.data"
        :key="index"
        class="stats shadow bg-slate-200"
      >
        <div class="stat p-2">
          <div class="text-sm font-bold text-slate-800">
            {{ item.name }}
          </div>
        </div>
        <div class="stat text-center p-2">
          <div class="text-2xl text-slate-800">
            <FontAwesomeIcon :icon="['fas', 'temperature-high']" />
          </div>
          <div class="text-sm text-slate-800">
            {{ item.temperature }}
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="text-center text-slate-400 py-4">無冷藏室資料</div>
    </template>
  </div>
</template>
