import { forwardRef } from 'react';

import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

import { getInfo } from 'src/utils/chats';

export type ChatInfoProps = {
  body: string;
  plainText?: boolean;
};

const ChatInfo = forwardRef<HTMLInputElement, ChatInfoProps>(
  function ChatInfoComponent(props, ref) {
    const { body, plainText = false } = props;
    return (
      <Box
        ref={ref}
        sx={{ mb: 2 }}
      >
        <Typography
          variant="body2"
          color="textSecondary"
          textAlign="center"
        >
          {plainText ? body : getInfo(body)}
        </Typography>
      </Box>
    );
  },
);

export default ChatInfo;