<template>
  <div class="animate-pulse" :class="wrapperClass">
    <div
      v-for="n in count"
      :key="n"
      class="skeleton-shimmer rounded-md"
      :style="{ height: height, marginBottom: gap }"
    />
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  height?: string;
  gap?: string;
  wrapperClass?: string;
}>(), {
  count: 3,
  height: "20px",
  gap: "12px",
  wrapperClass: "w-full",
});
</script>
