﻿<template>
    <div class="flex flex-col text-hOnPrimary">
        <div class="flex items-center gap-2">
            <span class="capitalize text-3xl">
                {{ brandingStore.value.name }}
            </span>
            <div v-show="brandingStore.value.verified"
                 class="text-blue mt-1"
                 :title="t('verified')">
                <icon-account-verified></icon-account-verified>
            </div>
        </div>
        <span class="capitalize text-lg">
            {{ brandingStore.value.title }}
        </span>
    </div>   
</template>

<script setup>
import IconAccountVerified from "@/components/icons/IconAccountVerified.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
import { useI18n } from 'vue-i18n';

const brandingStore = useBrandingStore();
const { t } = useI18n();
</script>

<i18n>
{
  "en": {
    "verified": "Verified Account"
  },
  "fr": {
    "verified": "Compte vérifié"
  },
  "es": {
    "verified": "Cuenta verificada"
  }
}
</i18n>