<script setup lang="ts">
import {BadgeVariant} from "@/Types/types";

withDefaults(defineProps<{
    variant?: BadgeVariant
    type?: 'class' | 'difficulty'
}>(), {
    type: 'class'
})
</script>

<template>
    <span v-if="variant !== 'unspecified'" class="class-badge" :class="variant ? `${type}-${variant}-global` : 'class-economy-global'">
        <slot />
    </span>
</template>

<style scoped>
.class-badge {
    display: inline-flex;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    padding: 0.18rem 0.55rem;
    border-radius: 2px;
    text-transform: uppercase;
    cursor: pointer;
}

</style>
