<template>
  <button
    :disabled="loading || disabled"
    class="loading-button button button--primary button--big"
  >
    <template v-if="!loading">
      {{ label }}
    </template>
    <loading-icon
      class="loading-button__icon"
      v-else
    />
  </button>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const LoadingIcon = defineAsyncComponent(() =>
  import('@/components/icons/LoadingIcon.vue')
);

export default {
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: '',
    },
  },
  components: {
    LoadingIcon,
  },
};
</script>

<style scoped lang="scss">
@import 'styles/helpers';

.loading-button {
  height: 52px;
  min-width: 100px;
  display: inline-flex;
  justify-content: center;

  &__icon {
    width: 14px;
    height: 14px;
    margin: 0 auto;
    @include spin;
    fill: $color-brand;
  }
}
</style>
