<template>
  <div
    class="animate-pulse"
    :class="variant === 'inline' ? 'inline-block' : 'w-full'"
    role="status"
    aria-busy="true"
    aria-label="Loading"
  >
    <template v-if="variant === 'table'">
      <div class="space-y-3 py-2">
        <div
          v-for="i in rows"
          :key="i"
          class="grid grid-cols-5 gap-3 items-center"
        >
          <div class="h-3 rounded bg-line" />
          <div class="h-3 rounded bg-line" />
          <div class="h-3 rounded bg-line w-3/4" />
          <div class="h-5 rounded-control bg-line w-24" />
          <div class="h-3 rounded bg-line w-2/3" />
        </div>
      </div>
    </template>
    <template v-else-if="variant === 'row'">
      <div class="space-y-2">
        <div
          v-for="i in rows"
          :key="i"
          class="h-4 rounded bg-line"
          :style="{ width: rowWidth(i) }"
        />
      </div>
    </template>
    <div
      v-else
      class="rounded bg-line"
      :style="{ height: height ?? '1rem', width: width ?? '100%' }"
    />
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    /** `block` = single rectangle; `row` = stacked lines; `table` = list-row placeholders */
    variant?: 'block' | 'row' | 'table' | 'inline'
    rows?: number
    height?: string
    width?: string
  }>(),
  {
    variant: 'block',
    rows: 5,
  }
)

function rowWidth(index: number): string {
  const widths = ['100%', '92%', '85%', '96%', '78%']
  return widths[(index - 1) % widths.length]
}
</script>
