<template>
    <div class="roleBadge">
    <span :class="['roleBadge__label', roleClass]">
      {{ role }}
    </span>
        <span v-if="type" class="roleBadge__type">
      {{ type }}
    </span>
    </div>
</template>

<script>
export default {
    name: 'RoleBadge',
    props: {
        role: {
            type: String,
            required: true
        },
        type: {
            type: String,
            default: null
        }
    },
    computed: {
        roleClass() {
            return `roleBadge__label--${this.role}`;
        }
    }
};
</script>

<style lang="less">
@import "../../../../styles/admin/elements/chat/RoleBadge.less";
</style>
