<script setup>
defineProps({ data: Array });
</script>
<template>
  <div class="flex flex-col gap-3">
    <div
      v-for="(item, index) in data"
      :key="index"
      class="stats shadow bg-slate-200"
    >
      <div class="w-26 stat items-center p-2">
        <div class="text-sm font-bold text-slate-800">{{ item.name }}</div>
        <div class="text-sm text-slate-800">&nbsp;</div>
      </div>
      <div class="w-15 stat content-center text-center gap-1 p-2">
        <FontAwesomeIcon
          :icon="['fas', 'temperature-high']"
          class="text-2xl text-slate-800 mx-auto"
        />
        <div class="text-sm text-slate-800">{{ item.temperature }}</div>
      </div>
    </div>
  </div>
</template>
