import React from 'react';
import cx from 'classnames';

export interface UndoLinkPropType {
    isDisabled?: boolean;
    undoMessage: string;
    undoHandler: any;
}

export const UndoLink: React.FC<UndoLinkPropType> = ({
    isDisabled = false,
    undoMessage,
    undoHandler,
}) => (
    <div className="ItemList-UndoMoveItems">
        <div>
            <span className="ItemList-UndoMoveItems-Msg">{undoMessage}</span>
            <span
                className={cx({
                    'ItemList-UndoMoveItems-Link': true,
                    'ItemList-LinkDisable': isDisabled,
                })}
                data-testid="ItemList-UndoLink"
                onClick={isDisabled ? () => false : undoHandler}
                onKeyDown={() => false}
            >
                Undo
            </span>
        </div>
    </div>
);

export default UndoLink;