<template>
  <div
    class="visual-badge flex flex-items-center flex-justify-center rounded-50 font-size-10 font-800 whitespace-nowrap"
    :class="toneClass">
    <slot>{{ label }}</slot>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  label: {
    type: String,
    default: "",
  },
  tone: {
    type: String,
    default: "slate",
  },
});

const toneClass = computed(() => `visual-badge--${props.tone}`);
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
