<template>
  <button
    class="pui-button"
    v-bind="$attrs"
    :type="nativeType"
    :class="[size, type, {
      'is-secondary': secondary,
      'is-link': link,
    }]"
    v-on="$listeners"
  >
    <p-icon v-if="iconLeft" :size="size" :icon="iconLeft" left />
    <span v-if="label">{{ label }}</span>
    <span v-else-if="$slots.default">
      <slot />
    </span>
    <p-icon v-if="iconRight" :size="size" :icon="iconRight" right />
  </button>
</template>

<script>
export default {
  name: "PButton",
  props: {
    type: String,
    size: String,
    secondary: {
      type: Boolean,
      default: () => false,
    },
    link: {
      type: Boolean,
      default: () => false,
    },
    label: [Number, String],
    iconLeft: String,
    iconRight: String,
    nativeType: {
      type: String,
      default: "button",
      validator: (value) => {
        return ["button", "submit", "reset"].indexOf(value) >= 0;
      },
    },
  },
};
</script>