interface MenuItem {
  text: string
  url: string
}

type Menu = MenuItem[]

export const NavbarSchema = {
  app_name: { type: "string", required: true },
  logo_url: "string",
  logo_on_right: "boolean",
  menu: { $ref: "menu", required: true },
  cta: { $ref: "menu" }
};

export type ExtractedNavbarSchema = {
  app_name: string,
  logo_url?: string,
  logo_on_right?: boolean
  menu: Menu,
  cta: Menu
}

export const Navbar = ({ app_name, logo_url, logo_on_right, menu, cta }: ExtractedNavbarSchema) => {
  return (
    <div class="navbar bg-base-100 shadow-sm">
      <div class="navbar-start">
        <div class="dropdown">
          <div tabindex={0} role="button" class="btn btn-ghost lg:hidden">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h8m-8 6h16"
              />
            </svg>
          </div>
          <ul
            tabindex={0}
            class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
          >
            {menu.map((item) => (
              <li>
                <a href={item.url}>{item.text}</a>
              </li>
            ))}
          </ul>
        </div>
        <div class={`flex ${logo_on_right ? "flex-row-reverse" : ""} gap-2`}>
          {logo_url &&
            <img src={logo_url} class="h-6" />}
          <a class="btn btn-ghost text-xl">{app_name}</a>
        </div>
      </div>
      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
          {menu.map((item) => (
            <li>
              <a href={item.url}>{item.text}</a>
            </li>
          ))}
        </ul>
      </div>
      <div class="navbar-end">
        {cta.filter((_, i) => i == 0).map((item) => (
          <a class="btn" href={item.url}>{item.text}</a>
        ))}
      </div>
    </div>
  );
};