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

interface BadgeProps {
  count?: number
  maxCount?: number
  color?: string
  dot?: boolean
  shape?: 'circle' | 'square'
  size?: 'small' | 'medium' | 'large'
  showZero?: boolean
  offset?: [number, number]
  className?: string
}

export default function TDesignBadge({
  count = 0,
  maxCount = 99,
  color = '#FF4646',
  dot = false,
  shape = 'circle',
  size = 'medium',
  showZero = false,
  offset,
  className = ''
}: BadgeProps) {
  // 是否显示徽章
  const shouldShow = dot || (showZero ? count >= 0 : count > 0)

  // 显示的内容
  const displayContent = dot ? '' : (count > maxCount ? `${maxCount}+` : count.toString())

  // 计算偏移量
  const offsetStyle = offset ? {
    transform: `translate(${offset[0]}rpx, ${offset[1]}rpx)`
  } : {}

  if (!shouldShow) {
    return null
  }

  return (
    <View
      className={`tdesign-badge tdesign-badge--${size} tdesign-badge--${shape} ${dot ? 'tdesign-badge--dot' : 'tdesign-badge--count'} ${className}`}
      style={{
        backgroundColor: color,
        ...offsetStyle
      }}
    >
      {!dot && (
        <Text className="tdesign-badge__content">
          {displayContent}
        </Text>
      )}
    </View>
  )
}