<template>
  <AColorBadge random :seed="text" class="tw-flex tw-items-center tw-justify-center">
    <svg viewBox="0 0 22 22" class="tw-w-8/12">
      <text
        x="50%"
        y="15"
        fill="currentColor"
        font-weight="bold"
        text-anchor="middle"
        style="font-size: 12px"
      >
        {{ text }}
      </text>
    </svg>
  </AColorBadge>
</template>

<script lang="ts" setup>
import AColorBadge from '@/components/generic/AColorBadge.vue'

defineOptions({ compatConfig: { MODE: 3 } })

defineProps<{
  text?: string
}>()
</script>