import React from "react";
import styles from "./styles.module.css";

interface IMessageProps {
  text: string | React.ReactNode;
  isSelf: boolean;
  advisorName?: string;
  avatar?: string;
  backgroundTextColor?: string;
  textColor?: string;
  isVisible?: boolean;
}

// eslint-disable-next-line react-refresh/only-export-components
function Message({
  text,
  avatar,
  isSelf,
  advisorName = "Advisor",
  backgroundTextColor = "#0080ff",
  textColor = "#fff",
  isVisible = true,
}: IMessageProps) {
  if (!isVisible) return null;
  return (
    <div
      className={styles.container}
      style={{ flexDirection: isSelf ? "row-reverse" : "row" }}
    >
      {!isSelf && avatar?.length && (
        <img
          className={styles.avatar}
          src={avatar}
          alt={`${advisorName} avatar`}
        />
      )}
      <div
        className={styles.text}
        style={{ color: textColor, backgroundColor: backgroundTextColor }}
      >
        {text}
      </div>
    </div>
  );
}

// eslint-disable-next-line react-refresh/only-export-components
export default React.memo(Message);
