import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

type ConfigVersionToolbarMetaProps = {
  children: ReactNode;
  className?: string;
  /** Highlights read-only or draft-only hints. */
  emphasis?: boolean;
};

/** Single-line meta row under the version toolbar (live version, read-only hints). */
export function ConfigVersionToolbarMeta({
  children,
  className,
  emphasis = false,
}: ConfigVersionToolbarMetaProps) {
  return (
    <div
      className={cn(
        "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs leading-relaxed",
        emphasis ? "text-foreground" : "text-muted-foreground",
        className,
      )}
      role="status"
    >
      {children}
    </div>
  );
}

export function ConfigVersionToolbarMetaEmphasis({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return <span className={cn("font-medium text-primary", className)}>{children}</span>;
}