import { Link } from "@tanstack/solid-router";
{{#if auth}}
import UserMenu from "./user-menu";
{{/if}}
import { For } from "solid-js";

export default function Header() {
  const links = [
    { to: "/", label: "Home" },
    {{#if auth}}
    { to: "/dashboard", label: "Dashboard" },
    {{/if}}
    {{#if (includes examples "todo")}}
    { to: "/todos", label: "Todos" },
    {{/if}}
    {{#if (includes examples "ai")}}
    { to: "/ai", label: "AI Chat" },
    {{/if}}
  ];

  return (
    <div>
      <div class="flex flex-row items-center justify-between px-2 py-1">
        <nav class="flex gap-4 text-lg">
          <For each={links}>
            {(link) => <Link to={link.to}>{link.label}</Link>}
          </For>
        </nav>
        <div class="flex items-center gap-2">
          {{#if auth}}
          <UserMenu />
          {{/if}}
        </div>
      </div>
      <hr />
    </div>
  );
}