<script setup lang="ts">
/**
 * Reusable skeleton loader component.
 *
 * Provides multiple skeleton variants for loading states:
 * - Card: card layout with title and content lines
 * - List: multiple rows with optional avatar
 * - Detail: detailed view with mixed content
 *
 * Uses Nuxt UI USkeleton components.
 */

const props = withDefaults(
  defineProps<{
    /** Number of skeleton lines to display (default: 3). */
    lines?: number
    /** Show an avatar circle placeholder. */
    avatar?: boolean
    /** Render as a card skeleton with border and padding. */
    card?: boolean
  }>(),
  {
    lines: 3,
    avatar: false,
    card: false,
  },
)

/** Generate varying line widths for a natural appearance. */
const lineWidths = computed(() => {
  const widths = ['w-full', 'w-3/4', 'w-5/6', 'w-2/3', 'w-4/5']
  return Array.from({ length: props.lines }, (_, i) => widths[i % widths.length])
})
</script>

<template>
  <!-- Card variant -->
  <UCard v-if="card" class="animate-pulse">
    <div class="space-y-4">
      <!-- Optional avatar row -->
      <div v-if="avatar" class="flex items-center gap-3">
        <USkeleton class="h-10 w-10 rounded-full" />
        <div class="flex-1 space-y-2">
          <USkeleton class="h-4 w-1/3" />
          <USkeleton class="h-3 w-1/4" />
        </div>
      </div>

      <!-- Title line -->
      <USkeleton class="h-5 w-2/3" />

      <!-- Content lines -->
      <div class="space-y-2">
        <USkeleton
          v-for="(width, i) in lineWidths"
          :key="i"
          class="h-3"
          :class="width"
        />
      </div>
    </div>
  </UCard>

  <!-- List / default variant -->
  <div v-else class="space-y-3 animate-pulse">
    <div
      v-for="(width, i) in lineWidths"
      :key="i"
      class="flex items-center gap-3"
    >
      <!-- Optional avatar per line -->
      <USkeleton v-if="avatar" class="h-8 w-8 rounded-full flex-shrink-0" />

      <!-- Line content -->
      <div class="flex-1 space-y-1">
        <USkeleton class="h-3" :class="width" />
        <USkeleton v-if="i === 0" class="h-2 w-1/4" />
      </div>
    </div>
  </div>
</template>
