import { View } from '@tarojs/components'
import './index.less'

const Skeleton = ({ isSkeletonShow }) => {
  return (
    <View className="skeleton" style={{ display: isSkeletonShow ? 'block' : 'none' }}>
      {/* 轮播图占位 */}
      <View className="skeleton-carousel"></View>

      {/* 列表分类 */}
      <View className="skeleton-category">
        {[...Array(5)].map((_, index) => (
          <View key={index} className="skeleton-category-item"></View>
        ))}
      </View>

      {/* 运营区域 */}
      <View className="skeleton-operation">
        <View className="skeleton-operation-item"></View>
        <View className="skeleton-operation-item"></View>
      </View>

      {/* 商品列表 */}
      <View className="skeleton-product">
        <View className="skeleton-product-image"></View>
        <View className="skeleton-product-info">
          <View className="skeleton-product-title"></View>
          <View className="skeleton-product-price"></View>
          <View className="skeleton-product-buttons">
            <View className="skeleton-product-button"></View>
            <View className="skeleton-product-button"></View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default Skeleton