<template>
  <button
    :disabled="loading"
    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 LoadingIcon from '@/components/icons/LoadingIcon';

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

<style scoped lang="scss">
  @import "@/styles/_helpers.scss";

  .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>
