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

/**
 * 数字角标
 * - count 为 0 / null / undefined 时不渲染
 * - count > max 时显示 `${max}+`（默认 99+）
 * - 通过 className 控制定位（通常配合父元素 relative + absolute -top-1 -right-1）
 *
 * @example
 * <View className='relative'>
 *   <Text>📦</Text>
 *   <Badge count={14} className='absolute -top-1 -right-1' />
 * </View>
 *
 * // 大尺寸 + 加粗（如门店中心卡片角标）
 * <Badge count={5} className='absolute -top-1 -right-1' size={20} fontSize={11} fontWeight='bold' />
 */
export interface BadgeProps {
  /** 数量；为 0 / null / undefined 时不渲染 */
  count?: number | null
  /** 超过此值显示 `${max}+`，默认 99 */
  max?: number
  /** 外层定位/样式 className（如 'absolute -top-1 -right-1'） */
  className?: string
  /** 背景色，默认红色 #ef4444 */
  color?: string
  /** 字体大小 px，默认 10 */
  fontSize?: number
  /** 角标尺寸 px（min-width 与 height 同步），默认 16 */
  size?: number
  /** 字重，默认 'normal' */
  fontWeight?: 'normal' | 'medium' | 'bold'
}

const Badge: React.FC<BadgeProps> = ({
  count,
  max = 99,
  className = '',
  color = '#ef4444',
  fontSize = 10,
  size = 16,
  fontWeight = 'normal',
}) => {
  // 0 / null / undefined / 负数 都不渲染
  const n = Number(count) || 0
  if (n <= 0) return null

  const display = n > max ? `${max}+` : String(n)
  // 横向 padding 跟随 size：16→2px，20→3px，避免多位数字挤压
  const padding = Math.max(2, Math.round(size / 8))

  return (
    <View
      className={`rounded-full text-white flex items-center justify-center ${className}`}
      style={{
        background: color,
        minWidth: `${size}px`,
        height: `${size}px`,
        fontSize: `${fontSize}px`,
        lineHeight: `${fontSize + 2}px`,
        fontWeight,
        paddingLeft: `${padding}px`,
        paddingRight: `${padding}px`,
      }}
    >
      <Text>{display}</Text>
    </View>
  )
}

export default Badge
