<template>
  <span class="jn-badge jn-badge-status jn-badge-not-a-wrapper">
    <span class="jn-badge-status-dot" :class="`jn-badge-status-${status}`" />
    <span class="jn-badge-status-text">{{ text }}</span>
  </span>
</template>
<script>
export default {
  name: 'Badge',
  props: {
    status: {
      type: String,
      default: () => 'default'
    },
    text: {
      type: String,
      default: null
    }
  }
}
</script>
<style scoped lang="scss">
.jn-badge {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #000000d9;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  position: relative;
  display: inline-block;
}
.jn-badge-status-dot {
  position: relative;
  top: -1px;
  display: inline-block;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
}
.jn-badge-status {
  line-height: inherit;
  vertical-align: baseline;
}

.jn-badge-status-default {
  background-color: #d9d9d9;
}
.jn-badge-status-success {
  background-color: #52c41a;
}
.jn-badge-status-error {
  background-color: #ff4d4f;
}
.jn-badge-status-warning {
  background-color: #faad14;
}
.jn-badge-status-text {
  margin-left: 8px;
  color: #000000d9;
  font-size: 14px;
}
</style>
