import { View } from '@tarojs/components'

interface IconProps {
  name: string
  size?: string
  color?: string
  className?: string
  onClick?: () => void
}

// 图标名称到 Heroicons 类名的映射
const iconClassMap: Record<string, string> = {
  // 搜索相关
  'search': 'i-heroicons-magnifying-glass-20-solid',
  'close-circle-filled': 'i-heroicons-x-circle-20-solid',

  // 导航相关
  'home': 'i-heroicons-home-20-solid',
  'user': 'i-heroicons-user-20-solid',
  'shopping-cart': 'i-heroicons-shopping-cart-20-solid',
  'heart': 'i-heroicons-heart-20-solid',

  // 操作相关
  'add': 'i-heroicons-plus-20-solid',
  'minus': 'i-heroicons-minus-20-solid',
  'close': 'i-heroicons-x-mark-20-solid',
  'check': 'i-heroicons-check-20-solid',
  'loading': 'i-heroicons-arrow-path-20-solid',

  // 方向相关
  'arrow-up': 'i-heroicons-chevron-up-20-solid',
  'arrow-down': 'i-heroicons-chevron-down-20-solid',
  'arrow-left': 'i-heroicons-chevron-left-20-solid',
  'arrow-right': 'i-heroicons-chevron-right-20-solid',
  'caret-up': 'i-heroicons-chevron-up-down-20-solid',
  'caret-down': 'i-heroicons-chevron-up-down-20-solid',
  'caret-left': 'i-heroicons-chevron-left-right-20-solid',
  'caret-right': 'i-heroicons-chevron-left-right-20-solid',

  // 状态相关
  'success': 'i-heroicons-check-circle-20-solid',
  'error': 'i-heroicons-exclamation-circle-20-solid',
  'warning': 'i-heroicons-exclamation-triangle-20-solid',
  'info': 'i-heroicons-information-circle-20-solid',
  'question': 'i-heroicons-question-mark-circle-20-solid',

  // 文件相关
  'file': 'i-heroicons-document-20-solid',
  'folder': 'i-heroicons-folder-20-solid',
  'image': 'i-heroicons-photo-20-solid',

  // 其他常用
  'star': 'i-heroicons-star-20-solid',
  'heart-filled': 'i-heroicons-heart-20-solid',
  'setting': 'i-heroicons-cog-6-tooth-20-solid',
  'filter': 'i-heroicons-funnel-20-solid',
  'share': 'i-heroicons-share-20-solid',
  'more': 'i-heroicons-ellipsis-horizontal-20-solid',
  'ellipsis': 'i-heroicons-ellipsis-horizontal-20-solid',

  // 订单相关
  'clock': 'i-heroicons-clock-20-solid',
  'truck': 'i-heroicons-truck-20-solid',
  'package': 'i-heroicons-cube-20-solid',

  // 菜单功能相关
  'location': 'i-heroicons-map-pin-20-solid',
  'service': 'i-heroicons-phone-20-solid',
  'info-circle': 'i-heroicons-information-circle-20-solid',
  'shield-check': 'i-heroicons-shield-check-20-solid',
}

export default function TDesignIcon({
  name,
  size = '32rpx',
  color = '#fa550f',
  className = '',
  onClick
}: IconProps) {
  const iconClass = iconClassMap[name] || `i-heroicons-question-mark-circle-20-solid`

  return (
    <View
      className={`${iconClass} tdesign-icon tdesign-icon--${name} ${className}`}
      style={{
        fontSize: size,
        color,
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        lineHeight: '1'
      }}
      onClick={onClick}
    />
  )
}