import type { PropsWithChildren } from "react";
import { cn } from "../../lib/cn";

export function Navbar({
  children,
  className,
  rightSlot,
  title,
}: PropsWithChildren<{ className?: string; rightSlot?: PropsWithChildren["children"]; title?: string }>) {
  return (
    <header
      className={cn(
        "flex flex-wrap items-center justify-between gap-4 rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-4 py-3",
        className,
      )}
    >
      <div className="flex min-w-0 flex-wrap items-center gap-4">
        {title ? <span className="text-sm font-medium text-[var(--uhuru-text-primary)]">{title}</span> : null}
        {children}
      </div>
      {rightSlot}
    </header>
  );
}