<template>
  <div class="batch-container" :class="batchClasses">
    <component
        v-if="showIcon"
        :is="iconComponent"
        weight="bold"
        size="12"
        class="batch-icon"
    />
    <span v-if="hasSlot" class="batch-text"><slot></slot></span>
  </div>
</template>

<script>
export default{
  name: "BasicBadge",
  props:{
    icon: {
      type: String,
      default: null
    },
    variant: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary', 'grey', 'exception', 'skeleton'].includes(value)
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => ['default', 'compact'].includes(value)
    }
  },
  computed: {
    showIcon (){
      return this.icon != null;
    },
    batchClasses() {
      return [
        `batch--${this.variant}`,
        `batch--${this.size}`
      ]
    },
    iconComponent() {
      if(this.icon != null) {
        const iconName = this.icon.charAt(0).toUpperCase() + this.icon.slice(1)
        return `Ph${iconName}`;
      } else return 'PhCheck';
    },
    hasSlot () {
      return !!this.$slots.default;
    }
  }
}
</script>

<style>

.batch-container {
  display: inline-flex;
  align-items: center;
  align-content: center;
  gap: 0.8rem;
  padding: 0.4rem 0.8rem;
  border: 0.2rem solid transparent;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 400;
  transition: all 0.2s ease-in-out;
  outline: none;
  user-select: none;
  height: 2.4rem;
}

.batch-container.batch--compact {
  padding: 0.2rem 0.4rem;
  gap: 0.4rem;
  height: 2rem;
}

.batch--primary {
  background-color: #5AF0B4;
  color: #002F54;
  border-color: transparent;
}

.batch--secondary {
  background-color: #c3cfdf;
  color: #002F54;
  border-color: transparent;
}

.batch--exception {
  background-color: #BC2B72;
  color: #ffffff;
  border-color: transparent;
}

.batch--grey {
  background-color: #DCDCDC;
  color: #002F54;
  border-color: transparent;
}

.batch--skeleton {
  border: 0.1rem solid #002F54;
  background-color: transparent;
  color: #002F54;
}

.batch--skeleton-grey {
  border: 0.1rem solid #6b7280;
  background-color: transparent;
  color: #6b7280;
}

.batch-icon {
  flex-shrink: 0;
}

.batch-text {
  white-space: nowrap;
}


</style>