import errorIcon from './assets/error.svg';
import warningIcon from './assets/warning.svg';
import './Messages.css';

function Messages(props) {
  return Object.keys(props.messages)
    ?.filter((item) => props.messages[item]?.status !== 'OK')
    .map((item, ind) => (
      <div
        className={
          props.messages[item].status === 'ERROR'
            ? 'message_error'
            : 'message_warning'
        }
        onClick={() => props.focusField(item)}
        key={`messages_${ind}`}
      >
        <img
          style={{ height: '20px' }}
          src={
            props.messages[item].status === 'ERROR' ? errorIcon : warningIcon
          }
          alt="Error"
        />
        {props.messages[item].message}
      </div>
    ));
}

export default Messages;