import { SidebarTrigger } from "@/components/ui/sidebar";
import { ThemeToggle } from "./theme-toggle";
import { UserNav } from "./user-nav";
import { Icons } from "./icons";
import { SettingsPanel } from "./settings-panel";

export function AppHeader() {
  return (
    <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
      <SidebarTrigger className="md:hidden" />
      <div className="flex items-center gap-2">
        <Icons.logo className="h-6 w-6 text-primary" />
        <h1 className="text-xl font-bold tracking-tight">ImageForge AI</h1>
      </div>
      <div className="ml-auto flex items-center gap-2">
        <SettingsPanel />
        <ThemeToggle />
        <UserNav />
      </div>
    </header>
  );
}