<script lang="ts">
	import '../app.css';
	import { ModeWatcher } from 'mode-watcher';
	import { ChatSocket } from '$lib/socket';
	import { onMount, type Snippet } from 'svelte';
	import { browser } from '$app/environment';
	import { setMessageStore } from '$lib/message.svelte';
	import type { LayoutServerData } from './$types.js';
	import Navbar from '$lib/Navbar.svelte';
	import { Toaster } from '$lib/components/ui/sonner';

	interface Props {
		children: Snippet;
		data: LayoutServerData;
	}

	let { children, data }: Props = $props();

	let socket;

	const store = setMessageStore([]);

	onMount(() => {
		if (browser) {
			socket = new ChatSocket(`ws://localhost:3000/ws?token=${data.token}`, store);
		}
	});
</script>

<ModeWatcher />
<Toaster />

<div class="flex h-full w-full flex-col items-center">
	<Navbar/>
	<div class="my-8 flex h-full w-full max-w-screen-2xl flex-col">
		{@render children()}
	</div>
</div>
