<template>
  <Button v-bind="$attrs" :type="type" :status="status" @click="() => emits('click')">
    <template v-if="icon && iconAlign === 'left'" #icon>
      <component :is="Icon[iconName]" />
    </template>
    {{ label }}
    <component :is="Icon[iconName]" v-if="icon && iconAlign === 'right'" :size="$attrs['size'] || 'small'" style="margin-left: 6px" />
  </Button>
</template>

<script lang="ts" setup>
  import { Button } from '@arco-design/web-vue';
  import * as Icon from '@arco-design/web-vue/es/icon';
  import { computed } from 'vue';
  import { camelCase, upperFirst } from 'lodash';

  const props = withDefaults(
    defineProps<{
      label?: string;
      icon?: string;
      iconAlign?: 'left' | 'right';
      type?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text';
      shape?: 'square' | 'round' | 'circle';
      status?: 'normal' | 'warning' | 'success' | 'danger';
    }>(),
    {
      iconAlign: 'left',
      type: 'secondary',
      shape: 'square',
      status: 'normal',
    }
  );

  const emits = defineEmits(['click']);

  const iconName = computed(() => upperFirst(camelCase(`icon-${props.icon}`)));
</script>

<style scoped></style>