import { REDACTED_PLACEHOLDER } from '../redaction';

interface RedactedValueProps {
	/** When false, renders a plain redacted word with no lock icon. */
	withLock?: boolean;
	label?: string;
}

/**
 * One shared redaction display. Secrets appear as a clear placeholder, never in
 * full.
 * @param root0
 * @param root0.withLock
 * @param root0.label
 */
export const RedactedValue = ( {
	withLock = true,
	label = REDACTED_PLACEHOLDER,
}: RedactedValueProps ) => (
	<span className="redacted">
		{ withLock ? <span className="lock">🔒</span> : null }
		{ label }
	</span>
);
