<template>
  <button type="button" :class="[ btnType, btnStyle ]" :data-text="text" :disabled="disabled" @click="$emit('callback')">
    <template v-if="icon">
      <img :src="icon" :class="iconSide" alt="text">
    </template>
    {{ text }}
  </button>
</template>

<script>
export default {
  name: 'main-button',
  props: {
    btnType: {
      type: String,
      required: false,
      default: 'sharp',
      validator: (value) => {
        return ['sharp', 'sharp-double', 'round-edge', 'rounded-edge', 'rounded-icon'].indexOf(value) !== -1
      }
    },
    btnStyle: {
      type: String,
      required: false,
      default: 'filled',
    },
    text: {
      type: String,
      required: false,
    },
    icon: {
      type: String,
      required: false,
    },
    iconSide: {
      type: String,
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    }
  }
}
</script>

<style lang="scss" scoped>
.sharp {
  @include sharp-button;
}
.sharp-double {
  @include sharp-double-button;
}
.round-edge {
  @include round-edge;
}
.rounded-edge {
  @include rounded-edge;
}
.rounded-icon {
  @include rounded-icon;
}
</style>

