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

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

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

const faq = [
    { icon: 'pi pi-shopping-cart', label: 'Pacotes', text: 'Compre antecipado pra pagar menos por mensagem.' },
    { icon: 'pi pi-wallet',        label: 'Saldo',   text: 'Veja em tempo real quantas mensagens ainda restam.' },
    { icon: 'pi pi-list',          label: 'Extrato', text: 'Histórico de uso e recargas, exportável quando precisar.' }
];
</script>

<template>
    <MelissaConfigPage
        title="Créditos WhatsApp"
        icon="pi pi-credit-card"
        subtitle="Compre pacotes antecipados de WhatsApp. Veja saldo, extrato e histórico em tempo real."
        faq-sub="Pacotes de mensagens"
        :faq="faq"
        @close="emit('close')"
    >
        <ConfiguracoesCreditosWhatsappPage />
    </MelissaConfigPage>
</template>
