import type { Signal } from "@preact/signals";
import { FunctionComponent } from "preact/src/index.d.ts";
import { Menu } from "npm:lucide-preact";

interface NavbarProps {
  user?: Signal<number>;
}

export const Navbar: FunctionComponent<NavbarProps> = () => {
  return (
    <div class="navbar bg-base-100 shadow-sm">
      <div class="navbar-start">
        <a href="/" class="btn btn-ghost text-xl max-lg:hidden">Viapak</a>
        <label for="site-drawer" class="btn btn-ghost drawer-button lg:hidden">
          { Menu({}) }
        </label>
      </div>
      <div class="navbar-center">
        <a href="/" class="btn btn-ghost text-xl lg:hidden">Viapak</a>
      </div>
      <div class="navbar-end">
        <ul class="menu menu-horizontal px-1">
          <li class="dropdown dropdown-end">
            <div tabindex={0} role="button" class="btn btn-ghost">User</div>
            <ul tabindex={0} class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
              <li><a>Item 1</a></li>
              <li><a>Item 2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  );
}