import { RedactedValue } from '../primitives/RedactedValue';
import type { ChangeRow } from '../selectors';

interface ChangeDiffProps {
	rows: Array<
		Pick< ChangeRow, 'id' | 'field' | 'before' | 'after' | 'sensitive' >
	>;
	beforeLabel?: string;
	afterLabel?: string;
}

export const ChangeDiff = ( {
	rows,
	beforeLabel = 'Before',
	afterLabel = 'After',
}: ChangeDiffProps ) => (
	<div className="cd-split">
		{ rows.map( ( row, index ) => (
			<div
				className="cd-split-row"
				key={ row.id || `${ row.field }-${ index }` }
			>
				<span className="cd-field">{ row.field }</span>
				<div className="cd-split-cols">
					<div className="cd-before">
						<span>{ beforeLabel }</span>
						<strong>
							{ row.sensitive ? <RedactedValue /> : row.before }
						</strong>
					</div>
					<span className="cd-arrow" aria-hidden="true">
						→
					</span>
					<div className="cd-after">
						<span>{ afterLabel }</span>
						<strong>
							{ row.sensitive ? <RedactedValue /> : row.after }
						</strong>
					</div>
				</div>
			</div>
		) ) }
	</div>
);
