import clsx from 'clsx';
import Image from 'next/image';
import styles from './index.module.scss';

interface ChatComponentProps {
  MeMessage?: boolean;
  UserMessage?: boolean;
  message?: string;
  messageTime?: string;
  image?: string;
  chatComponentStyles?: string;
}

const ChatComponent = ({
  MeMessage,
  UserMessage,
  message,
  messageTime,
  image,
  chatComponentStyles,
}: ChatComponentProps) => {
  return (
    <div
      className={clsx(styles.chatComponent, 'mb-3', chatComponentStyles)}
      data-me-message={MeMessage && 'me-message'}
      data-user-message={UserMessage && 'user-message'}
    >
      <div>
        <Image
          src={image || '/default-avatar.png'}
          width={40}
          height={40}
          alt=""
        />
      </div>
      <div
        className={`${styles.messageBox} position-relative `}
        data-time={messageTime}
      >
        <p>{message}</p>
      </div>
    </div>
  );
};

export default ChatComponent;