<template>
  <div :class="'button ' + (small ? 'small' : '') + (wide ? 'wide' : '') + (outline ? 'outline' : '')" @click="$emit('click')">
    <div v-if="loading" class="loading">
      <div style="opacity: 0">
        <slot />
      </div>
      <lottie
        class="lottie"
        :options="loadingOptions"
        :height="26"
        @animCreated="handleAnimation"
      />
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import lottie from 'vue-lottie/src/lottie.vue'
import * as loading from './loading-circle.json'
export default {
  components: {
    lottie
  },
  props: {
    small: {
      type: Boolean,
      default: false
    },
    wide: {
      type: Boolean,
      default: false
    },
    outline: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loadingOptions: {
        animationData: loading.default,
        rendererSettings: {
          viewBoxSize: '100 35 100 100'
        }
      }
    }
  },
  methods: {
    handleAnimation (anim) {
      this.anim = anim
    }
  }
}
</script>
<style src="./button.scss" lang="scss"></style>
<style src="../assets/fonts/gilmer/gilmer.css"></style>
