<template>
  <span
    :class="[
      'tag',
      type
    ]"
  >
    <span
      class="text"
      v-text="text"
    />

    <TfButton
      v-if="closable"
      class="close-btn"
      type="secondary"
      icon="times"
      size="icon-no-fill"
      @click="onClose"
    />
  </span>
</template>

<script>
/**
 * WatchTower Tag
 *
 * @vuedoc
 * @exports TfTag
 * @category Components
 */

  export default {
    name: 'TfTag',

    props: {
      text: {
        type: String,
        required: true,
      },
      closable: {
        type: Boolean,
        default: false,
      },
      type: {
        type: String,
        default: '',
      },
    },

    methods: {
      /**
       * Emit a close event on click
       */
      onClose() {
        this.$emit('close');
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  .tag {
    display: flex;
    min-width: 80px;
    padding: 0 10px;
    background: $tf-extra-light-gray-1;
    margin: 0 20px 20px 0;
  }

  .text {
    flex-grow: 1;
    color: $tf-black;
    font-size: 14px;
    line-height: 29px;
  }

  .wt-button--icon-no-fill.has-icon::v-deep,
  .tf-button--icon-no-fill.has-icon::v-deep {
    flex-grow: 0;

    svg {
      fill: $tf-dark-gray;
    }
  }
</style>
