import { JSX } from "preact";

const NAV_ITEM_CLASSES =
  "flex justify-center items-center px-4 py-2 text-blue-500 hover:bg-purple-700";

export function Page(props: JSX.HTMLAttributes<HTMLDivElement>) {
  return (
    <div class="relative min-h-screen flex flex-col">
      <header class="flex justify-start items-center">
        <nav class="flex bg-gray-800 w-full drop-shadow-md">
          <a href="/" class={NAV_ITEM_CLASSES}>
            <h1 class="text-2xl">LyricScreen</h1>
          </a>
          <a href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
          <a href="/register" class={NAV_ITEM_CLASSES}>Register</a>
          <a href="/login" class={NAV_ITEM_CLASSES}>Login</a>
        </nav>
      </header>
      <main class="p-2">
        {props.children}
      </main>
      <footer class="p-2 bg-gray-800 w-full mt-auto">
        "It's a bit much, really..."
      </footer>
    </div>
  );
}