<template>
  <button
      v-if="!link"
      :class="buttonClasses"
      class="btn"
      @click="handleClick"
  >
    <component
        v-if="showIcon"
        :is="iconComponent"
        weight="bold"
        size="18"
        class="btn-icon"
    />
    <span class="btn-text"><slot></slot></span>
  </button>
  <router-link v-else :to="to" :class="buttonClasses"
               class="btn" :disabled="disabled">
    <component
        v-if="showIcon"
        :is="iconComponent"
        weight="bold"
        size="18"
        class="btn-icon"
    />
    <slot></slot>
  </router-link>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'BasicButton',
  emits: ['click'],
  props: {
    text: {
      type: String,
      default: 'OK'
    },
    icon: {
      type: String,
      default: 'check'
    },
    variant: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary'].includes(value)
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    link: {
      type: Boolean,
      defaultValue: false
    },
    to: {
      type: String,
      required: false,
      default: '/'
    }
  },
  computed: {
    buttonClasses() {
      return [
        `btn--${this.variant}`,
        {
          'btn--disabled': this.disabled
        }
      ]
    },
    iconComponent() {
      const iconName = this.icon.charAt(0).toUpperCase() + this.icon.slice(1)
      return `Ph${iconName}`
    }
  },
  methods: {
    handleClick(event) {
      if(this.disabled) return;
      this.$emit('click', event);
    }
  }
})
</script>

<style scoped>
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.6rem 1.2rem;
  border: 0.2rem solid transparent;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  outline: none;
  user-select: none;
  font-family: 'Poppins', sans-serif;
}

/* Primary variant */
.btn--primary {
  font-weight: 500;
  background-color: #5AF0B4;
  color: #002F54;
  border-color: transparent;
}

.btn--primary:hover:not(.btn--disabled) {
  background-color: #002F54;
  color: #ffffff;
}

/* Secondary variant */
.btn--secondary {
  font-weight: 500;
  background-color: #002F54;
  color: #ffffff;
  border-color: transparent;
}

.btn--secondary:hover:not(.btn--disabled) {
  background-color: #ffffff;
  color: #002F54;
  border-color: #002F54;
  font-weight: 500;
}


/* Disabled state */
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon {
  flex-shrink: 0;
  display: inline-block;
}

.btn-text {
  white-space: nowrap;
}

</style>