import React from 'react';
import { InfoMessage } from '@theorchard/suite-components';

interface ReadErrorProps {
    error?: {
        message: string;
    };
}

export const INTL_CLASSNAME = 'publishing.errors';

const ReadError: React.FC<ReadErrorProps> = ({ error }) => {
    React.useEffect(() => {
        if (error && error.message)
            // eslint-disable-next-line no-console
            console.log(error.message);
    }, [error]);

    return (
        <div className="ReadError">
            <InfoMessage
                message={$t(`${INTL_CLASSNAME}.texts.somethingWrong`)}
                body={$t(`${INTL_CLASSNAME}.texts.couldNotFind`)}
                illustration="noResults"
            />

            <div className="ReadError-subtitle">
                {$t(`${INTL_CLASSNAME}.texts.tryAgain`)}
            </div>
        </div>
    );
};

export default ReadError;