import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { LoadingSpinner } from '../loadingSpinner';
import { CLASS_NAME } from './field';

interface FieldMessageProps {
    type: 'error' | 'warning' | 'loading';
    text: string | JSX.Element;
}

export const FieldMessage: React.FC<FieldMessageProps> = ({ type, text }) => {
    const renderIcon = () => {
        switch (type) {
            case 'warning':
                return <GlyphIcon name="warning" size={12} />;
            case 'loading':
                return <LoadingSpinner show size={12} />;
            default:
                return null;
        }
    };

    return (
        <div data-testid={`${CLASS_NAME}-message`} className={cx(`${CLASS_NAME}-message`, type)}>
            {type !== 'error' && renderIcon()}
            <span data-testid="text">{text}</span>
        </div>
    );
};