<template>
  <component
    :is="tag"
    :class="classes"
    class="flex justify-center items-center text-white font-semi-bold drop-shadow-sm rounded-8 transition-colors duration-300 hover:shadow-black"
    v-bind="$attrs"
    @click="buttonClick">
    <slot />
  </component>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

const buttonTypeClassesMapping: Record<string, string> = {
  primary: 'bg-orange-600 text-white active:bg-orange-700 hover:bg-orange-500',
  secondary: 'bg-white text-black hover:text-orange-600 active:text-orange-400',
};

const buttonSizeClassesMapping: Record<string, string> = {
  small: 'text-14 py-8 px-20',
  big: 'text-18 py-16 px-24',
};

export default defineComponent({
  props: {
    size: {
      type: String as PropType<'small' | 'big'>,
      default: 'small',
    },
    type: {
      type: String as PropType<'primary' | 'secondary'>,
      default: 'primary',
    },
    loading: {
      type: Boolean,
      default: false,
    },
    icon: { type: Boolean, default: false },
    to: { default: '', type: [String, Object] },
    tag: { type: String, default: 'button' },
    gtagEvent: { default: '', type: String, required: false },
  },

  computed: {
    classes(): any {
      const colorClass = buttonTypeClassesMapping[this.type];
      const sizeClass = buttonSizeClassesMapping[this.size];

      return [
        this.size,
        this.type,
        colorClass,
        sizeClass
      ];
    },
  },

  methods: {
    buttonClick(this: any) {
      if (this.gtagEvent) {
        (window as any).gtag('event', this.gtagEvent);
      }

      if (this.to) {
        this.$router.push({ path: this.to });
      }
    },
  },
});
</script>
