import { component$ } from "@builder.io/qwik";
import { useNanostore$ } from "~/hooks/nanostores";
import { isSettingsOpen, userInfo } from "~/lib/stores";
import { StereoUser } from "~/lib/types";

export default component$(() => {
    const info = useNanostore$<StereoUser>(userInfo);
    const open = useNanostore$<boolean>(isSettingsOpen);
    if (open.value) return (
        <div onClick$={() => open.value = false} class="z-[50] absolute flex w-full h-screen items-center justify-center backdrop-blur-3xl bg-black/50 text-white text-6xl">
            <div onClick$={e => e.stopPropagation()} class="flex gap-8 bg-black/50 p-8 rounded-3xl shadow-lg w-4/7 h-4/7">
                <div class="flex flex-col flex-1/4 border-r-2 border-white/25">
                    <h1 class="text-2xl">settings</h1>
                </div>

                <div class="flex flex-col flex-3/4">
                    <h1 class="text-2xl">content</h1>
                </div>
            </div>
        </div>
    ); else return (
        <></>
    );
})