import { auth } from "@/auth";
import { SidebarTrigger } from "../ui/sidebar";
import { Breadcrumbs } from "../breadcrumbs";
import { Separator } from "../ui/separator";
import { ThemeModeToggle } from "../themes/theme-mode-toggle";
import { NotificationCenter } from "@/features/notifications/components/notification-center";

export default async function Header() {
  await auth();

  return (
    <header className="bg-background/60 sticky top-0 z-20 flex h-16 shrink-0 items-center justify-between gap-2 backdrop-blur-md md:h-14">
      <div className="flex min-w-0 flex-1 items-center gap-2 px-2 sm:px-4">
        <SidebarTrigger className="-ml-1" />
        <Separator orientation="vertical" className="mr-1 hidden h-4 sm:flex" />
        <div className="min-w-0 flex-1">
          <Breadcrumbs />
        </div>
      </div>

      <div className="flex shrink-0 items-center gap-1 px-2 sm:gap-2 sm:px-4">
        <div className="hidden md:flex"></div>
        <ThemeModeToggle />
        <NotificationCenter />
      </div>
    </header>
  );
}
