<script>

export default {
  name: "VButton",
  props: {
    onClick: {
      type: Function,
      default: () => {
      },
    },
    selected: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    minWidth: {
      type: String,
      default: "80px",
    },
    title: {
      type: String,
      default: "",
    },
    classBtn: {
      type: Array,
      default: () => [],
    },
    classIcon: {
      type: String,
      default: "",
    },
    disable: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    setSelected: function() {
      this.onClick(this.selected)
    }
  }
}
</script>

<template>
  <button
    :type="type"
    :class="`${classBtn} w-full relative col-span-4 md:col-span-2 items-center justify-center text-center border-solid border-blue-1 z-10 ${disable ? 'opacity-50 cursor-auto' : 'cursor-pointer'}`"
    :disabled="disable"
    @click="setSelected()"
  >
    <i
      v-if="classIcon"
      :class="classIcon"
      class="text-blue-1"
    />
    {{ title }}
  </button>
</template>