<template>
     <Modal ref="modal" icon="fa-solid fa-screwdriver-wrench" :title="`Gestion : ${server?.name}`">
        <ModalTree title="Utilisateurs" icon="fa-solid fa-users">
            <GuildUsers :server="server"/>
        </ModalTree>
        <ModalTree title="Statistiques" icon="fa-solid fa-chart-simple">
            <GuildStats :server="server"/>

        </ModalTree>
    </Modal>
</template>
<script setup>
import Modal from '@/components/UI/Modal.vue';
import ModalTree from '@/components/UI/ModalTree.vue';
import { ref } from 'vue';
import GuildUsers from './Settings/GuildUsers.vue';
import GuildStats from './Settings/GuildStats.vue';
import Events from '@/utils/Events';

const modal = ref(null);

const props = defineProps({
    server: {
        type: Object,
        required: true
    }
});

defineExpose({
    open() {
        if (modal.value) {
            modal.value.open();
            Events.emit("GUILD_JOINED")
        }
    },
    close() {
        if (modal.value) {
            modal.value.close();
        }
    }
});
</script>