<template>
    <span :class="['wkb-tag', type]">
        <slot />
    </span>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";

const { state, commit, dispatch } = useStore();
const prop = defineProps({
    type: {
        type: String,
        default: 'primary'
    }
});

onMounted(() => { });
</script>
<style scoped lang="scss">
.wkb-tag {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 10.5px;

    &.primary {
        color: #387dff;
        background-color: rgba(#387dff, 0.2);
    }

    &.success {
        color: #23b899;
        background-color: rgba(#23b899, 0.2);
    }

    &.danger {
        color: #fe7c4b;
        background-color: rgba(#fe7c4b, 0.2);
    }
}
</style>