<template>
	<div
		:class="
			attrs.class || 'd-flex flex-row justify-center items-center gap-4'
		"
	>
		<!--			attrs.class || 'd-flex flex-column justify-center items-center gap-2'-->
		<Facebook :class="classes.btn" @login="socialLogin"/>
		<Google :class="classes.btn" @login="socialLogin"/>
		<Apple :class="classes.btn" @login="socialLogin"/>
	</div>
</template>

<script setup>
const Facebook = Vue.defineAsyncComponent(
	async () =>
		await loadModule(`${SAS_URL}/src/components/login/social-medias/Facebook.vue`, options)
);

const Google = Vue.defineAsyncComponent(
	async () =>
		await loadModule(`${SAS_URL}/src/components/login/social-medias/Google.vue`, options)
);

const Apple = Vue.defineAsyncComponent(
	async () =>
		await loadModule(`${SAS_URL}/src/components/login/social-medias/Apple.vue`, options)
);

const attrs = Vue.useAttrs()
const emit = defineEmits(['loggedIn'])

defineProps({
	classes: {
		type: Object,
		default: () => ({}),
	},
})

const socialLogin = async (data) => {
	useUserStore().setLoginSocialMedias(data)
	await useUserStore().setSyncUser()
}
</script>

<style></style>
