import React from 'react'
import { View } from '@tarojs/components'
import { Skeleton } from '@nutui/nutui-react-taro'
import './OrderConfirmSkeleton.scss'

const OrderConfirmSkeleton: React.FC = () => {
  return (
    <View className="order-confirm-skeleton">
      {/* 收货地址骨架 */}
      <View className="skeleton-section">
        <View className="skeleton-address">
          <Skeleton width="20px" height="20px" animated />
          <View className="skeleton-address-content">
            <Skeleton width="200px" height="16px" animated />
            <Skeleton width="120px" height="14px" animated />
          </View>
        </View>
      </View>

      {/* 商品信息骨架 */}
      <View className="skeleton-section">
        <View className="skeleton-goods">
          <Skeleton width="80px" height="80px" animated />
          <View className="skeleton-goods-content">
            <Skeleton width="180px" height="16px" animated />
            <Skeleton width="60px" height="14px" animated />
            <View className="skeleton-goods-price">
              <Skeleton width="80px" height="16px" animated />
              <Skeleton width="40px" height="14px" animated />
            </View>
          </View>
        </View>
      </View>

      {/* 支付方式骨架 */}
      <View className="skeleton-section">
        <View className="skeleton-payment">
          <Skeleton width="60px" height="16px" animated />
          <Skeleton width="80px" height="16px" animated />
        </View>
      </View>

      {/* 价格明细骨架 */}
      <View className="skeleton-section">
        <View className="skeleton-price-item">
          <Skeleton width="100px" height="16px" animated />
          <Skeleton width="60px" height="16px" animated />
        </View>
        <View className="skeleton-price-item">
          <Skeleton width="60px" height="16px" animated />
          <Skeleton width="80px" height="16px" animated />
        </View>
        <View className="skeleton-price-item">
          <Skeleton width="60px" height="16px" animated />
          <Skeleton width="60px" height="16px" animated />
        </View>
        <View className="skeleton-price-item">
          <Skeleton width="120px" height="18px" animated />
          <Skeleton width="80px" height="18px" animated />
        </View>
      </View>

      {/* 订单备注骨架 */}
      <View className="skeleton-section">
        <View className="skeleton-remark">
          <Skeleton width="60px" height="16px" animated />
          <Skeleton width="200px" height="32px" animated />
        </View>
      </View>

      {/* 底部按钮骨架 */}
      <View className="skeleton-bottom">
        <Skeleton width="120px" height="20px" animated />
        <Skeleton width="100px" height="40px" animated />
      </View>
    </View>
  )
}

export default OrderConfirmSkeleton