import React from 'react';

const ColoredIcon = React.memo(({ src, color, size = '20px', style = {} }) => {
    if (!color) {
        return (
            <div style={{ width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, ...style }}>
                <img src={src} alt="" style={{ width: size, height: size, objectFit: 'contain' }} />
            </div>
        );
    }
    return (
        <div style={{
            width: size, height: size, flexShrink: 0,
            overflow: 'hidden',
            ...style,
        }}>
            <img
                src={src}
                alt=""
                style={{
                    width: size, height: size,
                    objectFit: 'contain',
                    filter: `drop-shadow(${size} 0 0 ${color})`,
                    transform: `translateX(-${size})`,
                }}
            />
        </div>
    );
});

export default ColoredIcon;
