import type { ReactNode } from "react";

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

type ConfigReadonlyValueProps = {
  children: ReactNode;
  className?: string;
  mono?: boolean;
};

export function ConfigReadonlyValue({
  children,
  className,
  mono = false,
}: ConfigReadonlyValueProps) {
  return (
    <span
      className={cn(
        "inline-flex min-h-9 w-full items-center rounded-md border border-border/60 bg-muted/60 px-3 text-sm text-foreground",
        mono && "font-mono tabular-nums",
        className,
      )}
    >
      {children ?? "—"}
    </span>
  );
}
