import { View, Button } from '@tarojs/components'
import { useState, useEffect } from 'react'

interface EarningsCardProps {
  availableAmount?: number
  pendingAmount?: number
  onWithdraw?: () => void
}

function EarningsCard({
  availableAmount = 0.00,
  pendingAmount = 0.00,
  onWithdraw
}: EarningsCardProps) {

  const handleWithdraw = () => {
    if (onWithdraw) {
      onWithdraw()
    }
  }

  return (
    <View className="mx-4 mb-4">
      <View
        className="rounded-2xl p-4 relative overflow-hidden"
        style={{
          background: 'linear-gradient(135deg, #8B5CF6 0%, #A855F7 50%, #C084FC 100%)'
        }}
      >
        {/* 装饰性背景元素 */}
        <View
          className="absolute -top-4 -right-4 w-20 h-20 rounded-full opacity-20"
          style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
        />
        <View
          className="absolute -bottom-6 -left-6 w-16 h-16 rounded-full opacity-10"
          style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
        />

        <View className="relative z-10">
          {/* 可提现金额 */}
          <View className="mb-4">
            <View className="text-white text-base opacity-90 mb-1">
              可提现 {availableAmount.toFixed(2)} 元
            </View>
            <View className="text-white text-base opacity-90">
              待提现 {pendingAmount.toFixed(2)} 元
            </View>
          </View>

          {/* 提现按钮 */}
          <View className="flex justify-end">
            <Button
              className="bg-white text-purple-600 px-6 py-2 rounded-full text-sm font-medium border-0"
              style={{
                backgroundColor: 'white',
                color: '#8B5CF6',
                fontSize: '14px',
                fontWeight: '500',
                borderRadius: '20px',
                padding: '8px 24px',
                border: 'none'
              }}
              onClick={handleWithdraw}
            >
              去提现
            </Button>
          </View>
        </View>
      </View>
    </View>
  )
}

export default EarningsCard