<template>
  <Button v-bind="$attrs" :size="size" :type="type" :loading="loading" :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'" 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<{
    loading?: boolean;
    label?: string;
    icon?: string;
    iconAlign?: 'left' | 'right';
    type?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text';
    shape?: 'square' | 'round' | 'circle';
    status?: 'normal' | 'warning' | 'success' | 'danger';
    size?: 'mini' | 'small' | 'medium' | 'large';
  }>(),
  {
    loading: false,
    iconAlign: 'left',
    type: 'secondary',
    shape: 'square',
    status: 'normal',
    size: 'small',
  }
);

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

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

<style scoped></style>