'use client';

import { BreadcrumbBasic } from '@/components/app-breadcrumb';
import { ModeToggle } from '@/components/mode-toogle';
import { Separator } from '@/components/ui/separator';
import { SidebarTrigger, useSidebar } from '@/components/ui/sidebar';

export function ModuleShellHeader() {
  const { isMobile } = useSidebar();

  return (
    <div className="sticky top-0 z-50 flex h-14 items-center justify-between gap-4 border-b border-border bg-background/95 px-6 backdrop-blur supports-backdrop-filter:bg-background/80">
      <div className="flex min-w-0 items-center gap-3">
        {isMobile ? (
          <>
            <SidebarTrigger className="shrink-0 bg-background/80 text-muted-foreground shadow-xs backdrop-blur-sm" />
            <Separator orientation="vertical" className="h-4 shrink-0" />
          </>
        ) : null}
        <div className="min-w-0">
          <BreadcrumbBasic />
        </div>
      </div>
      <ModeToggle />
    </div>
  );
}