<template>
  <div class="skeleton-loader" :class="customClass">
    <div v-for="n in rows" :key="n" class="skeleton-loader__row">
      <div
        v-for="i in colsPerRow"
        :key="i"
        class="skeleton-loader__cell"
        :style="{ background: bgColor }"
      />
    </div>
  </div>
</template>

<script setup>
defineProps({
  rows: { type: Number, default: 5 },
  colsPerRow: { type: Number, default: 2 },
  customClass: { type: String, default: '' },
  bgColor: { type: String, default: '#f9f9f9' },
})
</script>

<style lang="scss" scoped>
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;

  &__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: #f9f9f9;
    border-radius: 0.75rem;
  }

  &__cell {
    flex: 1 1 0;
    min-height: 4rem;
    border-radius: 0.75rem;
  }
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}
</style>
