template-10550/src/components/CouponStats.tsx

import React from 'react'
import { View, Text } from '@tarojs/components'
import { Gift, Voucher, Clock } from '@nutui/icons-react-taro'

export interface CouponStatsProps {
  /** 可用优惠券数量 */
  availableCount: number
  /** 已使用优惠券数量 */
  usedCount: number
  /** 已过期优惠券数量 */
  expiredCount: number
  /** 点击统计项的回调 */
  onStatsClick?: (type: 'available' | 'used' | 'expired') => void
}

const CouponStats: React.FC<CouponStatsProps> = ({
  availableCount,
  usedCount,
  expiredCount,
  onStatsClick
}) => {
  const handleStatsClick = (type: 'available' | 'used' | 'expired') => {
    onStatsClick?.(type)
  }

  return (
    <View className="bg-white mx-4 my-3 rounded-xl p-4 hidden">
      <Text className="font-semibold text-gray-800">优惠券统计</Text>

      <View className="flex justify-between mt-2">
        {/* 可用优惠券 */}
        <View
          className="flex-1 text-center py-3 mx-1 bg-red-50 rounded-lg"
          onClick={() => handleStatsClick('available')}
        >
          <View className="flex justify-center mb-2">
            <Gift size="24" className="text-red-500" />
          </View>
          <Text className="text-2xl font-bold text-red-500 block">{availableCount}</Text>
          <Text className="text-sm text-gray-600 mt-1">可用</Text>
        </View>

        {/* 已使用优惠券 */}
        <View
          className="flex-1 text-center py-3 mx-1 bg-green-50 rounded-lg"
          onClick={() => handleStatsClick('used')}
        >
          <View className="flex justify-center mb-2">
            <Voucher size="24" className="text-green-500" />
          </View>
          <Text className="text-2xl font-bold text-green-500 block">{usedCount}</Text>
          <Text className="text-sm text-gray-600 mt-1">已使用</Text>
        </View>

        {/* 已过期优惠券 */}
        <View
          className="flex-1 text-center py-3 mx-1 bg-gray-50 rounded-lg"
          onClick={() => handleStatsClick('expired')}
        >
          <View className="flex justify-center mb-2">
            <Clock size="24" className="text-gray-500" />
          </View>
          <Text className="text-2xl font-bold text-gray-500 block">{expiredCount}</Text>
          <Text className="text-sm text-gray-600 mt-1">已过期</Text>
        </View>
      </View>
    </View>
  )
}

export default CouponStats