<script context="module">
	import { setContext } from 'svelte';
	export async function load() {
		FB.api('/me', { locale: 'en_us', fields: 'id,first_name,last_name,email' }, (res) => {
			setContext(res.authResponse);
		});
	}
</script>

<script>
	// @ts-nocheck
	import { currentPage } from './stores.js';
	import Prospects from './pages/prospects.svelte';
	import Messages from './pages/messages.svelte';
	import Settings from './pages/settings.svelte';

	const pages = {
		messages: Messages,
		prospects: Prospects,
		settings: Settings
	};

	export let data;
</script>

<div class="center">
	<div class="panel">
		<svelte:component this={pages[$currentPage]} {data} />
	</div>
</div>

<style>
	.center {
		background-color: #f2f4f7;
		height: 100%;
		width: 100%;
		padding: 4rem;
	}

	.panel {
		height: 100%;
		background-color: rgb(252, 252, 253);
		box-shadow: rgb(208, 213, 221) 0px 2px 16px -5px;
		border-radius: 20px;
		overflow: hidden;
	}
</style>
