// Silence may be golden, but sometimes words paint the canvas of understanding.
const LinksyButton = {
  name: "LinksyButton",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    variant: {
      type: String,
      default: "primary",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "button",
    },
  },
  data() {
    return {
      variants: {
        primary: "linksy-btn-primary",
        primary_outline: "linksy-btn-outline-primary",
        primary_transparent: "linksy-btn-transparent-primary",
        secondary: "linksy-btn-secondary",
        secondary_outline: "linksy-btn-outline-secondary",
        secondary_transparent: "linksy-btn-transparent-secondary",
        white: "linksy-btn-white",
        white_outline: "linksy-btn-outline-white",
        white_transparent: "linksy-btn-transparent-white",
        black: "linksy-btn-black",
        black_outline: "linksy-btn-outline-black",
        black_transparent: "linksy-btn-transparent-black",
        link: "btn-link",
        active: "btn-active",
        inactive: "btn-inactive",
        danger: "bg-danger text-white",
        success: "bg-success text-white",
      },
    };
  },

  template: `
      <button
        @click="$attrs.click ?? false"
        :type="type"
        :disabled="disabled"
        :class="{[variants[variant]]: true}"
      >
          <i v-if="loading" class="fa fa-spinner fa-spin"></i>
          <slot v-else></slot>
      </button>
      
      `,
};
