import { ThemeToggle } from "@/components/theme-toggle";
import { cn } from "@/lib/utils";

export function PageHeader({
  children,
  sticky = false,
  wide = false,
  className,
}: {
  children: React.ReactNode;
  sticky?: boolean;
  wide?: boolean;
  className?: string;
}) {
  return (
    <header
      className={cn(
        "border-b border-border bg-card px-6",
        sticky ? "py-6 sticky top-0 z-20" : "py-8",
        className,
      )}
    >
      <div
        className={cn(
          "mx-auto flex items-start justify-between gap-4",
          wide ? "max-w-7xl" : "max-w-3xl",
        )}
      >
        <div className="flex-1 min-w-0">{children}</div>
        <div className="shrink-0 pt-1">
          <ThemeToggle />
        </div>
      </div>
    </header>
  );
}