import { css } from 'glamor';
import { observer } from 'mobx-react';
import { Text } from '../Text';
import React from 'react';

export interface ErrorMessageProps {
  errorMessage: React.ReactNode;
}

export const ErrorMessage = observer((props: ErrorMessageProps) => {
  const { errorMessage } = props;
  return (
    <div
      {...css({
        display: 'flex',
        justifyContent: 'center',
        width: '100%'
      })}
    >
      <Text color="error" bold>
        {errorMessage}
      </Text>
    </div>
  );
});