import { Icon } from '@8base/boost';
import cx from 'classnames';
import React, { useMemo } from 'react';

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

// -- TYPES

export interface IMessageFileProps extends Omit<IMessageProps, 'children'> {
  filename?: string | null;
  actions?: React.ReactNode;
}

// -- MAIN

function MessageFile({ filename, actions, className, ...msgProps }: IMessageFileProps) {
  const cnMessage = useMemo(
    () => ({
      wrapper: cx(className.wrapper, css.message),
      body: cx(className.body, css.body),
    }),
    [className],
  );

  return (
    <Message className={cnMessage} {...msgProps}>
      <Icon className={css.icon} name="Document" color={msgProps.isOwner && 'PRIMARY'} />
      <span className={css.name}>{filename || '-'}</span>
      {actions && <div className={css.actions}>{actions}</div>}
    </Message>
  );
}

export default MessageFile;