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

interface StatCardProps {
  label: string
  value: string | number
  sub?: string
  subColor?: string
  color?: string
}

export default function StatCard({ label, value, sub, subColor, color = '#3b82f6' }: StatCardProps) {
  return (
    <View className='bg-white rounded-lg p-4'>
      <Text className='text-sm text-gray-500 mb-2 block'>{label}</Text>
      <Text className='text-2xl font-bold block' style={{ color }}>
        {value}
      </Text>
      {sub && (
        <Text className='text-xs mt-1 block' style={{ color: subColor || '#52c41a' }}>
          {sub}
        </Text>
      )}
    </View>
  )
}