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

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

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

const faq = [
    { icon: 'pi pi-clock',     label: 'Tempo',     text: 'Defina em minutos ou horas o limite pra responder.' },
    { icon: 'pi pi-bell',      label: 'Alerta',    text: 'Notificação acionada quando o SLA está prestes a estourar.' },
    { icon: 'pi pi-chart-bar', label: 'Histórico', text: 'Dashboard mostra o cumprimento do SLA ao longo do tempo.' }
];
</script>

<template>
    <MelissaConfigPage
        title="SLA de resposta"
        icon="pi pi-stopwatch"
        subtitle="Tempo máximo pra responder uma conversa. O sistema notifica quando o SLA está estourando."
        faq-sub="Tempo de resposta"
        :faq="faq"
        @close="emit('close')"
    >
        <ConfiguracoesConversasSlaPage />
    </MelissaConfigPage>
</template>
