import React from 'react';
import classnames from 'classnames';
import { isNil } from 'ramda';
import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
import { OperationChip } from '../../../OperationChip';
import styles from './ChangeView.module.css';
export var ChangeView = function (_a) {
    var label = _a.label, oldValue = _a.oldValue, newValue = _a.newValue, operation = _a.operation, className = _a.className;
    var value = oldValue || newValue;
    return (React.createElement("div", { className: classnames(styles.field, className) },
        React.createElement("span", { className: styles.fieldName },
            label,
            ":"),
        !isNil(value) && (React.createElement("span", { className: styles.difference },
            value,
            newValue && oldValue && (React.createElement(React.Fragment, null,
                React.createElement(ArrowRightAltIcon, { "data-reltio-id": "arrow-right", className: styles.arrow }),
                newValue)))),
        operation && React.createElement(OperationChip, { operation: operation })));
};
