<template>
  <view class="skeleton" :class="[type, { animated }]" :style="customStyle">
    <view v-if="type === 'text'" class="skeleton-text" :style="{ width, height }" />
    <view v-else-if="type === 'circle'" class="skeleton-circle" :style="{ width, height }" />
    <view v-else-if="type === 'rect'" class="skeleton-rect" :style="{ width, height }" />
    <view v-else-if="type === 'image'" class="skeleton-image" :style="{ width, height }" />
    <slot v-else />
  </view>
</template>

<script setup lang="ts">
interface Props {
  type?: 'text' | 'circle' | 'rect' | 'image' | 'custom';
  width?: string;
  height?: string;
  animated?: boolean;
}

withDefaults(defineProps<Props>(), {
  type: 'text',
  width: '100%',
  height: '20rpx',
  animated: true,
});

const customStyle = {};
</script>

<style scoped>
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 37%,
    #f0f0f0 63%
  );
  background-size: 400% 100%;
}

.skeleton.animated {
  animation: skeleton-loading 1.4s ease infinite;
}

.skeleton-text {
  border-radius: 4rpx;
}

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-rect {
  border-radius: 8rpx;
}

.skeleton-image {
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

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