<template>
  <text class="icon" :class="'icon-' + name" :style="iconStyle">{{ iconChar }}</text>
</template>

<script>
const icons = {
  home: '🏠',
  user: '👤',
  chart: '📊',
  product: '📦',
  add: '+',
  search: '🔍',
  order: '📋',
  edit: '✎',
  check: '✓',
  close: '✕',
  stock: '🏭',
  alert: '⚡',
  in: '↓',
  out: '↑',
  customer: '👥',
  money: '💳',
  logout: '↩',
  right: '›',
  left: '‹',
  down: '⌄',
  lock: '🔐',
  filter: '▼',
  calendar: '📅',
  setting: '⚙',
  wechat: '💬',
  cash: '💵',
  alipay: '💙',
  plus: '📥',
  flow: '📊'
}

export default {
  name: 'Icon',
  props: {
    name: { type: String, required: true },
    size: { type: [Number, String], default: 32 },
    color: { type: String, default: '' }
  },
  computed: {
    iconStyle() {
      const style = {}
      if (this.size) style.fontSize = typeof this.size === 'number' ? `${this.size}rpx` : this.size
      if (this.color) style.color = this.color
      return style
    },
    iconChar() {
      return icons[this.name] || '•'
    }
  }
}
</script>

<style>
.icon {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: inline-block;
  text-align: center;
  line-height: 1;
}
</style>