import cx from 'classnames';
import React, { useMemo } from 'react';

import Message, { IMessageProps } from '../message';
import css from './message-image.module.css';

// -- TYPES

interface IMessageImageProps extends Omit<IMessageProps, 'children'> {
  downloadUrl: string;
  actions?: React.ReactNode;
}

// -- MAIN

function MessageImage({
  downloadUrl,
  actions,
  className,
  ...msgProps
}: IMessageImageProps) {
  const cnMessage = useMemo(
    () => ({
      wrapper: className.wrapper,
      body: cx(className.body, css.body),
    }),
    [className],
  );

  return (
    <Message {...msgProps} className={cnMessage} hasArrow={false}>
      <div className={css.base}>
        <img className={css.img} src={downloadUrl} />
        <div className={css.actions}>{actions}</div>
      </div>
    </Message>
  );
}

MessageImage.defaultProps = {
  className: {},
};

export default MessageImage;