<script setup>
const props = defineProps({
  lines: { type: Number, default: 3 },
  showAvatar: { type: Boolean, default: false },
  showImage: { type: Boolean, default: false },
});
</script>

<template>
  <div class="w-full animate-pulse">
    <div class="rounded-lg border border-gray-200 bg-white shadow-sm p-6">
      <!-- Header with avatar (optional) -->
      <div v-if="showAvatar" class="flex items-center gap-3 mb-4">
        <div class="h-10 w-10 rounded-full bg-gray-200"></div>
        <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>
      </div>

      <!-- Image (optional) -->
      <div v-if="showImage" class="h-48 bg-gray-200 rounded-lg mb-4"></div>

      <!-- Content lines -->
      <div class="space-y-3">
        <div
          v-for="(line, index) in lines"
          :key="index"
          class="h-4 bg-gray-100 rounded"
          :class="{
            'w-full': index === lines - 1,
            'w-5/6': index !== lines - 1 && index % 2 === 0,
            'w-4/6': index !== lines - 1 && index % 2 === 1,
          }"
        ></div>
      </div>

      <!-- Footer buttons (optional) -->
      <div class="flex gap-2 mt-6">
        <div class="h-9 bg-gray-100 rounded w-24"></div>
        <div class="h-9 bg-gray-100 rounded w-24"></div>
      </div>
    </div>
  </div>
</template>


