<script setup>
import { defineAsyncComponent } from 'vue';
import MelissaConfigPage from './MelissaConfigPage.vue';

const ConfiguracoesConversasTagsPage = defineAsyncComponent(
    () => import('@/layout/configuracoes/ConfiguracoesConversasTagsPage.vue')
);

const emit = defineEmits(['close']);

const faq = [
    { icon: 'pi pi-palette',       label: 'Cor',     text: 'Cada tag tem cor pra identificar visualmente na lista.' },
    { icon: 'pi pi-mouse-pointer', label: 'Aplicar', text: 'Arraste a tag pra conversa ou use o menu de contexto.' },
    { icon: 'pi pi-filter',        label: 'Filtrar', text: 'Liste apenas conversas com determinada tag no CRM.' }
];
</script>

<template>
    <MelissaConfigPage
        title="Tags de Conversa"
        icon="pi pi-tag"
        subtitle="Crie tags pra classificar threads no CRM (urgente, remarcação, financeiro…)."
        faq-sub="Etiquetas custom"
        :faq="faq"
        @close="emit('close')"
    >
        <ConfiguracoesConversasTagsPage />
    </MelissaConfigPage>
</template>
