<script setup lang="ts">
import { Icon } from '@iconify/vue';
defineProps<{
  icon?: string;
  title?: string;
  titleI18n?: string;
  hslaColor?: string;
  hslaBackground?: string;
  hslaBorder?: string;
  border?: boolean;
  solid?: boolean;
  transparency?: number;
}>();
</script>

<template>
  <div
    class="rounded q-px-sm flex-center"
    :style="{
      color: `hsla(var(${hslaColor || '--green-6-hsl'}) / 1)`,
      background: `hsla(var(${hslaBackground || hslaColor || '--green-6-hsl'}) / ${solid ? 1 : 0.15})`,
      border: border
        ? `0.5px solid hsla(var(${hslaBorder || hslaBackground || hslaColor || '--green-6-hsl'}) / ${solid ? 1 : 0.15})`
        : undefined,
    }"
  >
    <Icon :icon="icon || 'mdi-circle-medium'" style="margin-right: 0.25rem" />
    {{ title || (!!titleI18n ? $t(titleI18n) : '-') }}
  </div>
</template>

<style scoped>
div {
  display: inline-flex;
}
</style>
