import React from 'react';
import PropTypes from 'prop-types';

/**
 * A stateless component for Text state. It can be of text type: info, danger, success and warning.
 */

const TextState = (props) =>{
    return(
        <div>
            {(() => {
                switch(props.messageType) {
                case 'inline-message':
                    return <div aria-labelledby="inline-message" className='jp-textState-inline-message-text-content jp-textState-inline-message-text-color jp-textState-outline'>{props.children}</div>;
                case 'info':
                    return <div aria-labelledby="info" className='jp-textState-text-content jp-textState-info-text-color jp-textState-outline'>{props.children}</div>;
                case 'danger':
                    return <div aria-labelledby="danger" className='jp-textState-text-content jp-textState-danger-text-color jp-textState-outline'>{props.children}</div>; 
                case 'success':
                    return <div aria-labelledby="success" className='jp-textState-text-content jp-textState-success-text-color jp-textState-outline'>{props.children}</div>;
                case 'warning':
                    return <div aria-labelledby="warning" className='jp-textState-text-content jp-textState-warning-text-color jp-textState-outline'>{props.children}</div>;
                default :
                }
            })()}
        </div>
    );
};

TextState.propTypes = {
    /** children will be text content */
    children:PropTypes.string,
    /** messageType will be message type  */
    messageType:PropTypes.string
};

export default TextState;