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

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

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

const faq = [
    { icon: 'pi pi-qrcode',  label: 'QR Code',     text: 'Pareie com seu celular escaneando um QR code (igual WhatsApp Web).' },
    { icon: 'pi pi-mobile',  label: 'Seu número',  text: 'A reputação do número é sua — bloqueios e desbloqueios são por sua conta.' },
    { icon: 'pi pi-wifi',    label: 'Conexão',     text: 'Depende do celular online. Se desconectar, mensagens não são entregues.' }
];
</script>

<template>
    <MelissaConfigPage
        title="WhatsApp Pessoal"
        icon="pi pi-mobile"
        subtitle="Conecte seu próprio número via QR code. Mensagens enviadas e recebidas pelo seu celular."
        faq-sub="Conexão via QR"
        :faq="faq"
        @close="emit('close')"
    >
        <ConfiguracoesWhatsappPage />
    </MelissaConfigPage>
</template>
