<script setup lang="ts">
defineProps<{
  titleI18n: string;
  hslaColor?: string;
}>();
</script>

<template>
  <span
    class="rounded flex flex-center q-pa-xs"
    :style="`color: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.8);  background: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.1); `"
  >
    &#128900;
    {{ $t(titleI18n) }}
  </span>
</template>

<style scoped></style>
