<template>
  <span :class="classObject">
    <slot />
  </span>
</template>

<script>
export default {
  name: 'CuBadge',
  props: {
    size: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    rounded: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classObject () {
      return {
        badge: true,
        small: this.size === 'small',
        extrasmall: this.size === 'extrasmall',
        carrot: this.color === 'carrot',
        green: this.color === 'green',
        blue: this.color === 'blue',
        indigo: this.color === 'indigo',
        yellow: this.color === 'yellow',
        tomato: this.color === 'tomato',
        gray: this.color === 'gray',
        rounded: this.rounded
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/Badge.scss";
</style>
