import React, { memo } from 'react';

import { Text, LazyImage } from '..';

/**
 * Message blurb regarding an addon, including the addon icon and name.
 * Typically used in notifications and modal confirmations.
 * @component
 * @param {Addon} addon Addon
 * @param {string|React.Component|function(): React.ReactElement} message Message blurb
 * @param {number} [iconSize=20] Addon icon size (in pixels)
 */
export default memo(({ addon, message, iconSize }) => {
  iconSize = iconSize || '20';
  return (
    <Text>
      <span className='vz-addon-info-message'>
        {message}
      </span>
      <ul className='vz-addon-info-message-ul'>
        <li className='vz-addon-info-message-li' vz-addon-id={addon?.addonId} key={addon?.addonId}>
          <div className='vz-addon-info-message-icon'>
            {addon?.manifest?.icon && (
              <LazyImage
                className='vz-addon-info-message-icon-image-wrapper'
                imageClassName='vz-addon-info-message-icon-img'
                src={addon.manifest.icon}
                width={iconSize}
                height={iconSize}
              />
            )}
          </div>
          <div className='vz-addon-info-message-name'>
            {addon?.manifest?.name}
          </div>
        </li>
      </ul>
    </Text>
  );
});
