<template>
  <div>
    <div class="tags has-addons is-marginless">
      <span class="tag is-large is-success is-marginless">
        <span class="is-family-sans-serif is-size-6">
          <slot />
        </span>
      </span>
      <span class="tag is-large is-marginless" style="cursor: pointer;" @click="onRemove">
        <span class="is-size-6">
          <base-icon value="times" />
        </span>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

import ClickEvent from '../../core/events/ClickEvent'

import BaseIcon from '../icon/BaseIcon.vue'

@Component({
  name: 'base-tag',
  components: {
    BaseIcon
  }
})
export default class BaseTag extends Vue {
  onRemove () {
    this.$emit('click', new ClickEvent<void>())
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
@import "bulma/sass/elements/tag.sass";
</style>
