import { JSX } from "preact";

const NAV_ITEMS = {
  "/note": "Notes",
  "/register": "Register",
  "/login": "Login",
};

const navItem = ([url, text]: [string, string]) => {
  return (
    <a class="px-4 py-2 text-blue-500 hover:bg-gray-900" href={url}>{text}</a>
  );
};

export function Page(props: JSX.HTMLAttributes<HTMLDivElement>) {
  return (
    <div>
      <header>
        <h1>
          <a href="/">LyricScreen</a>
        </h1>
        <nav class="flex">
          {Object.entries(NAV_ITEMS).map(navItem)}
        </nav>
      </header>
      <main>
        {props.children}
      </main>
      <footer>
        "It's a bit much, really..."
      </footer>
    </div>
  );
}