<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/components/ui/LoadedPhraseBlock.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, onMounted } from 'vue';

const phrase = ref(null);

onMounted(async () => {
    try {
        const res = await fetch('/loading-phrases.json');
        const json = await res.json();
        const list = json.motivations || [];
        phrase.value = list.length ? list[Math.floor(Math.random() * list.length)] : null;
    } catch {
        phrase.value = null;
    }
});
</script>

<template>
    <Transition name="loaded-phrase-in" appear>
        <div v-if="phrase" class="loaded-phrase-block">
            <div class="loaded-phrase-block__header">
                <i class="pi pi-check-circle loaded-phrase-block__icon" />
                <span class="loaded-phrase-block__title">Ambiente carregado!</span>
            </div>
            <p class="loaded-phrase-block__text">{{ phrase }}</p>
        </div>
    </Transition>
</template>
