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

export default defineComponent({
  name: 'Icon',
  props: {
    icon: { type: String as PropType<string>, required: true },
    width: { type: Number, default: 16 },
    height: { type: Number, default: 16 },
    color: { type: String, default: 'currentColor' },
    spin: { type: Boolean, default: false },
    rotate: { type: Number, default: 360 },
  },
  setup(props) {
    const prefixCls = getPrefixCls('icon')
    return () => (
      <Icon
        icon={props.icon}
        width={props.width}
        height={props.height}
        style={{
          'color': props.color,
          'verticalAlign': 'middle',
          '--rotate-angle': `${props.rotate}deg`,
        }}
        class={props.spin ? `${prefixCls}-spin` : ''}
      />
    )
  },
})