<template>
  <view v-if="loading" class="cb-skeleton">
    <slot name="skeleton">
      <view v-for="i in rows" :key="i" class="skeleton-line"></view>
    </slot>
  </view>
  <slot v-else />
</template>

<script setup>
  defineProps({
    loading: {
      type: Boolean,
      default: true
    },
    rows: {
      type: Number,
      default: 3
    }
  })
</script>

<style scoped>
  .cb-skeleton {
    padding: 16rpx;
  }

  .skeleton-line {
    height: 32rpx;
    background: linear-gradient(
      90deg,
      #f0f0f0 25%,
      #e0e0e0 50%,
      #f0f0f0 75%
    );
    background-size: 200% 100%;
    border-radius: 8rpx;
    margin-bottom: 16rpx;
    animation: loading 1.5s infinite;
  }

  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
</style>
