import { useLocation } from "@solidjs/router"
import { createResource, Show, Suspense } from "solid-js"
import { useAuthSession } from "../lib/auth/actions.ts"

export default function Nav() {
    const location = useLocation()
    const active = (path: string) =>
        path == location.pathname
            ? "border-sky-600"
            : "border-transparent hover:border-sky-600"

    return (
        <nav class="flex flex-row px-4 py-2 gap-4 justify-between items-center mx-4 my-2 rounded-xl bg-base-200 text-secondary-content">
            <div class="flex flex-row gap-4">
                <a href="/">Home</a>
                <a href="/about">About</a>
            </div>

            <aside class="">
                <Suspense>
                    <LoginAccount />
                </Suspense>
            </aside>
        </nav>
    )
}

function LoginAccount() {
    const [session] = createResource(useAuthSession)

    return (
        <Show when={session()} fallback={<a href="/login">Login</a>}>
            <a href="/account">
                <img
                    src={session()?.avatar}
                    alt={session()?.handle}
                    class="size-12 rounded-full"
                />
            </a>
        </Show>
    )
}