<template>
  <component
    :is="tag"
    :class="[
      `${$classPrefix}-btn`,
      `${hasColor ? color : 'default'}`, {
        [`${$classPrefix}-btn-compact`]: compact,
        [`${$classPrefix}-btn-link`]: link,
        [`${$classPrefix}-btn-subtle`]: subtle,
        'disabled': disabled,
        'outline': outline,
        'dashed': dashed
      }
    ]"
    @click="$emit('click', $event)"
  >
    <slot />
  </component>
</template>

<script>
import _color from "../../utils/color.js";
// TODO: Loading state
export default {
  name: "IrbisButton",

  props: {
    tag: {
      type: String,
      default: "button",
      validator: value => {
        return (
          [
            "button",
            "a",
            "input",
            "router-link",
            "nuxt-link",
            "n-link",
            "NuxtLink",
            "NLink"
          ].indexOf(value) >= 0
        );
      }
    },
    color: {
      default: "default",
      type: String
    },
    compact: Boolean,
    link: Boolean,
    subtle: Boolean,
    disabled: Boolean,
    outline: Boolean,
    dashed: Boolean
  },

  computed: {
    hasColor() {
      return _color.hasColor(this.color);
    }
  },

  methods: {}
};
</script>