<script setup>
const props = defineProps({
  items: { type: Number, default: 5 },
  showAvatar: { type: Boolean, default: true },
});
</script>

<template>
  <div class="w-full animate-pulse">
    <div class="space-y-3">
      <div
        v-for="item in items"
        :key="item"
        class="flex items-center gap-4 p-4 bg-white rounded-lg border border-gray-200"
      >
        <!-- Avatar -->
        <div v-if="showAvatar" class="h-12 w-12 rounded-full bg-gray-200 flex-shrink-0"></div>
        
        <!-- Content -->
        <div class="flex-1 space-y-2">
          <div class="h-4 bg-gray-200 rounded w-3/4"></div>
          <div class="h-3 bg-gray-100 rounded w-1/2"></div>
        </div>
        
        <!-- Action -->
        <div class="h-8 w-8 rounded bg-gray-100 flex-shrink-0"></div>
      </div>
    </div>
  </div>
</template>


