import { $, component$, Slot, useOnDocument, useVisibleTask$ } from '@builder.io/qwik';
import AOS from 'aos';
import 'aos/dist/aos.css';
import { useNanostore$ } from '~/hooks/nanostores';
import { api } from '~/lib/api';
import { userInfo } from '~/lib/stores';
import { StereoUser } from '~/lib/types';

export default component$(() => {
	const info = useNanostore$<StereoUser>(userInfo);

	useVisibleTask$(async () => {
		try {
			info.value = await api.me();
		} catch (err) {
			console.error("failed to fetch user info:", err);
		}
	})

	useOnDocument("DOMContentLoaded", $(async () => {

		AOS.init({
			once: true,
			duration: 1000,
			offset: 100,
			easing: 'ease-in-out',
		});
	}))

	return (
		<div
		class="
			flex flex-col
			min-h-screen w-full overflow-x-clip
			bg-neutral-950 text-white
		">
			<Slot />
		</div>
	);
});