<script setup lang="ts">
import type { Summary } from '~/components/pub/my-ui/summary-card/type'

const props = defineProps<{
  isLoading: boolean
  summaryData: Summary[]
}>()
</script>

<template>
  <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
    <template v-if="props.isLoading">
      <PubMyUiSummaryCard v-for="n in 4" :key="n" is-skeleton :stat="summaryData[n]" />
    </template>
    <template v-else>
      <PubMyUiSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
    </template>
  </div>
</template>
