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


<script setup>
import { defineProps, computed } from 'vue'
import { normalizeUnitToStyle } from '../../utils/index'
import UIIcon from '../icon'

const props = defineProps({
  type: {
    type: String,
    default: 'normal',
  },
  color: {
    type: String
  },
  width: {
    type: [String, Number]
  },
  icon: {
    type: String
  }
})

const custom = `customize`
const className = computed(
  () => props.color ? custom : props.type
)

const style = computed(
  () => { 
    const style = {
      width: normalizeUnitToStyle(props.width)
    }

    if (className.value === custom) {
      style['--color'] = props.color
    }
    return style
  }
)

</script>

<script> export default { name: 'ui-button' } </script>