import { cn } from "@/lib/utils";
import ThemeHeaderToggle from "@/components/admin/common/ThemeHeaderToggle";
import { AppBreadcrumbs } from "./AppBreadcrumbs";
import { Separator } from "@/components/ui/separator";
import { DecorIcon } from "./DecorIcon";
function AppHeader() {
  return (
    <header
      className={cn(
        "sticky top-0 z-50 flex h-14 shrink-0 items-center justify-between gap-2 border-b px-4 md:px-6",
        "bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/50",
      )}
    >
      <DecorIcon className="hidden md:block" position="bottom-left" />
      <div className="flex items-center gap-3">
        <Separator
          className="mr-2 h-4 data-[orientation=vertical]:self-center"
          orientation="vertical"
        />
        <AppBreadcrumbs />
      </div>
      <div className="flex items-center gap-3">
        <ThemeHeaderToggle />
      </div>
    </header>
  );
}

export default AppHeader;