/** Toolbar — a thin horizontal action bar (LD). */

import { cn } from "../lib/cn";

export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Push trailing children to the right with an auto margin. */
  justify?: "start" | "between" | "end";
}

const JUSTIFY = {
  start: "justify-start",
  between: "justify-between",
  end: "justify-end",
} as const;

/** A flex row for grouping buttons/controls with consistent spacing. */
export function Toolbar({ justify = "start", className, children, ...rest }: ToolbarProps) {
  return (
    <div
      role="toolbar"
      className={cn("flex items-center gap-2", JUSTIFY[justify], className)}
      {...rest}
    >
      {children}
    </div>
  );
}
