<script lang="ts" setup>
interface Props {
  type?: 'card' | 'table' | 'list' | 'chart' | 'text'
  count?: number
}

withDefaults(defineProps<Props>(), {
  type: 'card',
  count: 1,
})
</script>

<template>
  <div>
    <template v-if="type === 'card'">
      <VRow>
        <VCol v-for="i in count" :key="i" cols="12" md="4">
          <VSkeletonLoader type="card" />
        </VCol>
      </VRow>
    </template>

    <template v-else-if="type === 'table'">
      <VSkeletonLoader type="table-heading, table-tbody" />
    </template>

    <template v-else-if="type === 'list'">
      <VSkeletonLoader v-for="i in count" :key="i" type="list-item-avatar-two-line" class="mb-1" />
    </template>

    <template v-else-if="type === 'chart'">
      <VSkeletonLoader type="image" height="300" />
    </template>

    <template v-else>
      <VSkeletonLoader v-for="i in count" :key="i" type="text" class="mb-2" />
    </template>
  </div>
</template>
