<template>
  <span
    :class="`--${theme}`"
    :data-text="text"
    class="ui-label"
  >
    <slot/>
  </span>
</template>

<script setup lang="ts">
withDefaults(
    defineProps<{
      theme?: 'default' | 'primary' | 'primary-gradient' | 'green' | 'white' | 'black' | 'backdrop' | 'secondary' | 'success' | 'blur' | 'grey'
      text: string | number
    }>(), {
      theme: 'default'
    }
);
</script>

<style lang="scss">
.ui-label {
  @include font-xs;

  display: flex;
  align-items: center;
  column-gap: 4px;
  font-weight: 700;
  text-transform: uppercase;
  padding-block: 2px;
  padding-inline: 6px;
  border-radius: $radius-small;

  &::after {
    content: attr(data-text);
  }
}

.ui-label.--primary {
  background-color: $label-primary-bg;
  color: $label-primary-text;
}

.ui-label.--primary-gradient {
  background: $label-gradient-bg;
  color: $label-gradient-text;
}

.ui-label.--green {
  background-color: $label-green-bg;
  color: $label-green-text;
}

.ui-label.--white {
  background-color: $label-white-bg;
  color: $label-white-text;
}

.ui-label.--black {
  background-color: $label-black-bg;
  color: $label-black-text;
}

.ui-label.--bordered {
  @include font-xs;

  font-weight: 400;
  background-color: transparent;
  color: $label-bordered-text;
  border: 1px solid $label-bordered-border;
  border-radius: 8px;
  padding: 2px 4px;
  text-transform: none;
}

.ui-label.--backdrop {
  @include font-xs;

  font-weight: 400;
  backdrop-filter: blur(8px);
  padding: 2px 4px;
  border-radius: 8px;
  background-color: $label-backdrop-bg;
  color: $label-backdrop-text;
}
</style>
