<template>
  <button class="ui-button" :class="className" :style="style">
    <!-- <UIIcon :type="icon" v-if="icon" class="ui-button-icon" /> -->
    <slot></slot>
  </button>
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue';
  // import { normalizeUnitToStyle } from '../../utils/index'
  // import UIIcon from '../icon'

  export default defineComponent({
    name: 'UiButton',
    props: {
      type: {
        type: String,
        default: 'normal',
      },
      color: {
        type: String,
      },
      width: {
        type: [String, Number],
      },
      icon: {
        type: String,
      },
    },
    setup(props) {
      const custom = `customize`;
      const className = computed(() => (props.color ? custom : props.type));

      const style = computed(() => {
        const style = {
          width: props.width + 'px',
        };

        if (className.value === custom) {
          style['--color'] = props.color;
        }
        return style;
      });
      return {
        className,
        style,
      };
    },
  });
</script>
