<template>
  <div class="animate-pulse">
    <div v-for="n in count" :key="n" class="skeleton-card">
      <div class="skeleton-card-inner">
        <div class="skeleton-line w-1/4 mb-4"></div>
        <div class="skeleton-line-lg w-3/4 mb-3"></div>
        <div class="skeleton-line w-full mb-2"></div>
        <div class="skeleton-line w-5/6"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ count?: number }>(), { count: 3 })
</script>

<style scoped>
.skeleton-card {
  @apply bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden mb-6;
}
.skeleton-card-inner {
  @apply p-6 md:p-8;
}
.skeleton-line {
  @apply h-4 bg-gray-200 rounded;
}
.skeleton-line-lg {
  @apply h-6 bg-gray-200 rounded;
}
</style>
