import type { PropType } from 'vue'
import { Icon } from '@iconify/vue'
import { defineComponent } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'

export default defineComponent({
  name: 'Icon',
  props: {
    icon: { type: String as PropType<string>, required: true },
    size: { type: Number },
    color: { type: String, default: 'currentColor' },
    spin: { type: Boolean, default: false },
  },
  emits: ['click'],
  setup(props, { slots, emit }) {
    const prefixCls = getPrefixCls('icon')
    const fontStyle = {
      ...(props.size ? { fontSize: `${props.size}px` } : {}), // size 存在才设置
      verticalAlign: 'middle',
    }
    return () => (
      <i
        class={[prefixCls, props.spin && `${prefixCls}-spin`]}
        style={fontStyle}
        onClick={e => emit('click', e)}
      >
        {slots.default
          ? (
              slots.default()
            )
          : props.icon
            ? (
                <Icon
                  icon={props.icon}
                  color={props.color}
                  style={{ verticalAlign: 'middle' }}
                />
              )
            : null}
      </i>
    )
  },
})