<script setup>
defineProps({
  rows: { type: Number, default: 3 },
  avatar: { type: Boolean, default: false },
  card: { type: Boolean, default: false },
});
</script>

<template>
  <view class="skeleton" :class="{ 'skeleton-card': card }">
    <view v-if="avatar" class="sk-avatar shimmer" />
    <view class="sk-body">
      <view class="sk-title shimmer" />
      <view
        v-for="i in rows"
        :key="i"
        class="sk-row shimmer"
        :style="{ width: i === rows ? '60%' : '100%' }"
      />
    </view>
  </view>
</template>

<style scoped>
.skeleton {
  display: flex;
  padding: 24rpx;
  gap: 20rpx;
}
.skeleton-card {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.sk-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  flex-shrink: 0;
  background: #e2e8f0;
}
.sk-body {
  flex: 1;
}
.sk-title {
  height: 32rpx;
  width: 45%;
  border-radius: 6rpx;
  background: #e2e8f0;
  margin-bottom: 20rpx;
}
.sk-row {
  height: 24rpx;
  border-radius: 6rpx;
  background: #e2e8f0;
  margin-bottom: 16rpx;
}
.shimmer {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>
