src/components/Header.tsx

import { Icon } from "./Icon";

type Props = {
  /** Clears the session and returns to a fresh requisition (landing). */
  onNewRequisition?: () => void;
};

export function Header({ onNewRequisition }: Props) {
  return (
    <header className="h-16 border-b border-outline-variant bg-surface z-50 shrink-0">
      <div className="mx-auto flex h-full w-full max-w-6xl items-center justify-between px-gutter">
      <div className="flex items-center gap-8">
        <div className="flex flex-col">
          <h1 className="font-headline-md text-xl font-bold text-primary leading-tight">
            Procure
          </h1>
          <p className="text-[10px] uppercase tracking-wider text-secondary font-bold -mt-1">
            AI Agent
          </p>
        </div>
        <nav className="hidden md:flex items-center h-full">
          <a
            className="flex items-center gap-2 px-4 h-16 border-b-2 border-primary text-primary font-semibold transition-all"
            href="#chat"
          >
            <span className="font-label-caps text-xs">AI Chat</span>
          </a>
          <a
            className="flex items-center gap-2 px-4 h-16 border-b-2 border-transparent text-secondary hover:text-primary transition-all"
            href="#requests"
          >
            <Icon name="assignment" className="text-xl" />
            <span className="font-label-caps text-xs">Requests</span>
          </a>
          <a
            className="flex items-center gap-2 px-4 h-16 border-b-2 border-transparent text-secondary hover:text-primary transition-all"
            href="#dashboard"
          >
            <Icon name="dashboard" className="text-xl" />
            <span className="font-label-caps text-xs">Dashboard</span>
          </a>
          <a
            className="flex items-center gap-2 px-4 h-16 border-b-2 border-transparent text-secondary hover:text-primary transition-all"
            href="#settings"
          >
            <Icon name="settings" className="text-xl" />
            <span className="font-label-caps text-xs">Settings</span>
          </a>
        </nav>
      </div>
      <div className="flex items-center gap-6">
        <div className="relative w-64 hidden lg:block">
          <Icon
            name="search"
            className="absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm"
          />
          <input
            className="w-full pl-9 pr-4 py-1.5 bg-surface-container-low border border-outline-variant rounded-full focus:outline-none focus:border-primary text-body-sm"
            placeholder="Search records..."
            type="search"
            aria-label="Search records"
          />
        </div>
        <button
          type="button"
          onClick={() => onNewRequisition?.()}
          className="bg-primary text-on-primary px-4 py-1.5 rounded-full text-xs font-bold flex items-center gap-2 hover:opacity-90 transition-opacity"
        >
          <Icon name="add" className="text-sm" />
          New Requisition
        </button>
        <div className="flex items-center gap-3 pl-4 border-l border-outline-variant">
          <button
            type="button"
            className="text-secondary hover:text-primary transition-colors"
            aria-label="Notifications"
          >
            <Icon name="notifications" />
          </button>
          <div className="w-8 h-8 rounded-full overflow-hidden border border-outline-variant">
            <img
              alt="User profile"
              src="https://lh3.googleusercontent.com/aida-public/AB6AXuAB8IlU467es5NJk5X-KZ5aX33_ZJkLGC895NLoBOZaN8KZKwZZ4kehChNkwJqRDgUk4de9KdRpGG0-upWuOC20Uf7BU7O_T_Iu3Dtn9ORKohW57PyR0zFpC4WDe6mynmt3Ldl2U1XyvncN82W91Zqx3hPt1gxCs_LJINzsPfHfTW_apu_mST5BRuarVGGbv_F2b6uXeOgoPSsHSbiuvssQt3D_oPLxUPYFhfpO-RjqJxl-g4thcHTG0NMflquQxR5QLcnLR0X9UYwR"
              width={32}
              height={32}
              className="w-full h-full object-cover"
            />
          </div>
        </div>
      </div>
      </div>
    </header>
  );
}