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

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

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

const faq = [
    { icon: 'pi pi-plus-circle',  label: 'Add-ons',  text: 'Recursos opcionais que ampliam seu plano contratado.' },
    { icon: 'pi pi-credit-card',  label: 'Cobrança', text: 'Cobrado à parte da mensalidade do plano principal.' },
    { icon: 'pi pi-times-circle', label: 'Cancelar', text: 'Desativação imediata, sem multa nem fidelidade.' }
];
</script>

<template>
    <MelissaConfigPage
        title="Recursos Extras"
        icon="pi pi-box"
        subtitle="Amplie as funcionalidades do seu plano com recursos adicionais cobrados à parte."
        faq-sub="Add-ons"
        :faq="faq"
        @close="emit('close')"
    >
        <ConfiguracoesRecursosExtrasPage />
    </MelissaConfigPage>
</template>
