// Conversation.tsx
import React, { ForwardedRef } from 'react';

interface ConversationProps {
  messages: string[];
}

const Conversation = React.forwardRef<HTMLDivElement, ConversationProps>(({ messages }, ref: ForwardedRef<HTMLDivElement>) => {
  return (
    <div className="output">
      <div className="conversation resize" id="conversation" ref={ref}>
        {messages.map((message, index) => {
          const isUserMessage = message.startsWith('User:');
          return (
            <div
              key={index}
              className={isUserMessage ? 'user-message' : 'ai-message'}
            >
              {message}
            </div>
          );
        })}
        <form method="POST" action="" id="buttonForm">
          <button type="button" name="option" value="chat">
            <img src="/img/resend.svg" alt="resend" />
          </button>
          <button type="button" name="option" value="chat">
            <img src="/img/edit.svg" alt="edit" />
          </button>
          <button type="button" name="option" value="answer">
            <img src="/img/copy.svg" alt="copy" />
          </button>
        </form>
      </div>
    </div>
  );
});

export default Conversation;