<template>
  <button
    class="btn"
    :title="title"
    :type="type"
    :class="classes "
    :disabled="buttonLoading"
    @click="$emit('click')"
  >
    <the-button-loading v-if="buttonLoading"></the-button-loading>
    <slot />
    {{ buttonText }}
  </button>
</template>

<script>

/**
 * @vue-prop {String} [title=""] - عنوان
 * @vue-prop {String} [type="button"] - نوع
 * @vue-prop {String} [classes=""] - کلاس‌ها
 * @vue-prop {String} [buttonText="ثبت"] - متن دکمه
 * @vue-prop {Boolean} [buttonLoading=false] - وضعیت بارگذاری دکمه
 */


export default {
  props: {
    title: {
      default: "",
    },
    type: { 
      default: "button",
    },
    classes: {
      default: "",
    },
    buttonText: {
      default: "ثبت",
    },
    buttonLoading: {
      default: false,
      type: Boolean,
    },
  },
  
  emits: ["click"],
  
  
  
};
</script>

<style scoped></style>

<!-- <script setup>
const type = defineProps({
  type: String,
  default: "button",
});
const classed = defineProps({
  type: String,
  default: null,
});
</script>

<template>
  <button class="btn" :class="classed" :type="type"></button>
</template> -->