<script lang="ts">
import { createBlock, createCommentVNode, createElementVNode, defineComponent, resolveDynamicComponent } from 'vue-demi'

export default defineComponent({
  name: 'ItemIndex',
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    return () => createElementVNode('span', {
      style: 'padding: 0 20px; display: flex; align-items: center;'
    }, [
      props.icon
        ? createBlock(resolveDynamicComponent('el-icon'), null, {
          default: () => createBlock(resolveDynamicComponent(props.icon))
        })
        : createCommentVNode('v-if', true),
      props.title ? createElementVNode('span', null, props.title) : createCommentVNode('v-if', true)
    ])
  }
})
</script>

<style scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
</style>
