import React from 'react'
import { View, Text } from '@tarojs/components'

interface LoadingProps {
  /** 提示文字，默认"加载中..." */
  text?: string
  /** 是否全屏居中显示 */
  fullscreen?: boolean
  /** 自定义样式类名 */
  className?: string
}

/**
 * 统一加载状态组件
 * - 小程序兼容（无 CSS transition / animation 依赖）
 * - 支持内嵌和全屏两种模式
 */
const Loading: React.FC<LoadingProps> = ({
  text = '加载中...',
  fullscreen = false,
  className = '',
}) => {
  const content = (
    <View
      className={`flex flex-col items-center justify-center py-8 ${fullscreen ? 'fixed inset-0 z-50 bg-white/80' : ''} ${className}`}
    >
      {/* 简单的旋转加载指示器 */}
      <View
        className='w-7 h-7 rounded-full border-2 border-gray-200 mb-2'
        style={{
          borderTopColor: '#0e932e',
          borderRightColor: '#0e932e',
          animation: 'spin 0.8s linear infinite' as unknown as string,
        }}
      />
      <Text className='text-xs text-gray-400'>{text}</Text>
    </View>
  )

  // 全屏模式需要外层容器
  if (fullscreen) {
    return <>{content}</>
  }

  return content
}

export default Loading