<template>
  <button class="tag" :class="[type, { active }]" @click.prevent="onClick">
    <slot></slot>
  </button>
</template>

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

export default defineComponent({
  props: {
    type: {
      type: String as PropType<'white' | 'grey' | 'dark'>,
      default: 'white',
    },
    active: {
      type: Boolean,
      default: false,
    },
    path: {
      type: String,
      default: '',
    },
    targetBlank: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    onClick() {
      if (!this.path) {
        return;
      }

      if (this.targetBlank) {
        return window.open(this.path, '_blank');
      }

      this.$router.push(this.path);
    },
  },
});
</script>

<style lang="scss" scoped>
.tag {
  padding: 14px 20px;

  font-size: 12px;

  border-radius: 50px;

  transition: color 0.3s, background-color 0.3s;
}

.tag.white {
  color: #3c3d3e;

  background: #ffffff;

  &:hover,
  &.active {
    color: #ffffff;

    background: #242628;
  }

  &:active {
    color: #ffffff;

    background: #646668;
  }
}

.tag.grey {
  color: #3c3d3e;

  background: #f2f4f5;

  &:hover,
  &.active {
    color: #ffffff;

    background: #242628;
  }

  &:active {
    color: #ffffff;

    background: #646668;
  }
}

.tag.dark {
  color: #ffffff;

  background: #242628;

  &:hover,
  &.active {
    background: #3c3d3e;
  }

  &:active {
    background: #646668;
  }
}
</style>
