import { withStyles } from '@material-ui/core/styles';
import React, { useEffect, useState } from 'react';
import clsx from 'clsx';

export const Image = withStyles(
    {
        broken: {
            display: 'none',
        },
    },
    { name: 'Image' }
)(({ className, src, classes, ...props }) => {
    const [loadState, setLoadState] = useState('');
    useEffect(() => {
        setLoadState('loading');
    }, [src]);
    return (
        src && (
            <img
                {...props}
                src={src}
                onLoad={() => setLoadState('ready')}
                onError={() => setLoadState('broken')}
                className={clsx(className, classes[loadState])}
            />
        )
    );
});

export default Image;
