import { A, createAsync } from "@solidjs/router";
import { Show, Suspense } from "solid-js";

import { getCurrentUser } from "~/lib/queries";

import styles from "./Header.module.css";

export function Header() {
  const user = createAsync(() => getCurrentUser());

  return (
    <header class={styles.bar}>
      <A class={styles.brand} href="/">
        Askimut
      </A>
      <Suspense fallback={null}>
        <Show when={user()} keyed>
          {(u) => (
            <div class={styles.right}>
              <span class={styles.handle}>@{u.handle}</span>
              <a
                class={styles.signOut}
                href="/oauth/logout"
                onClick={(e) => {
                  e.preventDefault();
                  window.location.href = "/oauth/logout";
                }}
              >
                Sign out
              </a>
            </div>
          )}
        </Show>
      </Suspense>
    </header>
  );
}