export const Navbar = (
  { navItems, currentPath, children }: {
    navItems: any[];
    currentPath: string;
    children?: any;
  },
) => {
  return (
    <header class="top-bar">
      <div style="display: flex; align-items: center;">
        <a href="/dashboard" class="brand">
          <span class="brand-badge">AY</span>
          <span>Auth-Yes</span>
        </a>

        {/*  Desktop Nav Links  */}
        <nav class="desktop-nav">
          {navItems.map((item: any) => {
            const isActive = item.href === "/dashboard"
              ? currentPath === "/dashboard"
              : currentPath.startsWith(item.href) &&
                item.href !== "/dashboard";

            return (
              <a
                href={item.href}
                class={isActive ? "active" : ""}
              >
                <span dangerouslySetInnerHTML={{ __html: item.icon }} />
                <span>{item.label}</span>
              </a>
            );
          })}
        </nav>
      </div>

      {children}
    </header>
  );
};