<template>
    <Box no-shadow level="second" padding="closed">
        <div class="container-list">
            <ServerItem :server="server"/>
            <ServerOnlinePicture class="sop" :key="server.id" v-if="server.members.length > 0" :members="server.members"/>
            <Button class="btn" @click="access()">Accéder</Button>
        </div>
    </Box>
</template>
<script setup>
import Box from '@/components/UI/Box.vue';
import Button from '../UI/Button.vue';
import { useGlobalStore } from '@/stores/globalStore';
import { useRouter } from 'vue-router';
import ServerOnlinePicture from '@/components/Widget/ServerOnlinePicture.vue';
import ServerItem from '@/components/Widget/ServerItem.vue';
const router = useRouter();

const globalStore = useGlobalStore();

const props = defineProps({
    server: {
        type: Object,
        required: true,
        default: () => ({
            id: '',
            name: '',
            owner: false,
            icon: '',
            members: [],
            serverMember: 0,
            connected: false
        })
    }
});

function access() {
    router.push(`/servers/${props.server.id}`);
}
</script>
<style scoped>

.actions {
    display: flex;
    align-items: center;
    gap: 10px;
}   

@media screen and (max-width: 768px) {
    .container-list {
        flex-direction: column;
        gap: 20px;;

    }

    .btn {
        width: 100%;
    }

    .sop {
        display: none;
    }
    
}

.container-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;    
}

.sop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



</style>