import { UserNav } from "@/components/user-nav";
import HamburgerMenu from "./hamburger-menu";
import { ThemeToggle } from "./theme-toggle";
import { NavItem } from "@/config/nav";
import { siteConfig } from "@/config/site";

export const TopNav = () => {
  return (
    <nav className="flex h-[52px] items-center justify-between py-4 px-6 border-b">
      <div>
        <HamburgerMenu />
        <h1 className="font-cal hidden text-xl font-semibold capitalize leading-none lg:inline ml-4">
          {siteConfig.name}
        </h1>
        {/* {props.breadcrumbItems && (
        <Breadcrumbs items={props.breadcrumbItems} />
      )} */}
      </div>
      {/* {props.headerAction} */}
      <div className="flex items-center gap-4">
        <ThemeToggle />
        <UserNav />
      </div>
    </nav>
    // <nav className="sticky top-0 z-10 flex h-16 items-center gap-10 border-b bg-background/60 px-4 backdrop-blur-xl transition-all">
    //   <Link href="/" className="flex items-center space-x-2">
    //     <Icons.logo />
    //     <span className="inline-block font-urban text-xl font-bold">
    //       {siteConfig.name}
    //     </span>
    //   </Link>
    //   <nav className="hidden gap-6 md:flex">
    //     {navItems?.map((item, index) => (
    //       <Link
    //         key={index}
    //         href={item.href}
    //         className={cn(
    //           "flex items-center text-lg font-medium text-foreground/60 transition-colors hover:text-foreground/80 sm:text-sm",
    //           // TODO: active link css
    //           // item.href.startsWith(`/${segment}`)
    //           //   ? "text-foreground"
    //           //   : "text-foreground/60",
    //         )}
    //       >
    //         {item.title}
    //       </Link>
    //     ))}
    //   </nav>
    //   <div className="ml-auto flex items-center space-x-4">
    //     {/* <Search /> */}
    //     <UserNav />
    //   </div>
    // </nav>
  );
};
