import { Separator } from '@base-ui/react/separator';
import { SidebarTrigger } from '@ui/sidebar';
import { useAuth } from './auth/auth-provider';
import Notification from './Notification';
import RouterBreadcrumb from './sidebar/router-breadcrumb';

export default function Header() {
  const { session } = useAuth();

  return (
    <>
      <header className="flex h-(--header-height) sticky top-0 shrink-0 items-center justify-between gap-2 border-b bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
        <div className="flex items-center gap-1 lg:gap-2 px-2">
          <SidebarTrigger size="lg" />
          <Separator
            orientation="vertical"
            className="mx-2 data-[orientation=vertical]:h-4 border"
          />
          <RouterBreadcrumb />
        </div>
        <div className="flex mr-2">{session?.user && <Notification />}</div>
      </header>
    </>
  );
}