// import OpenAISVGLogo from './OpenAISVGLogo'
// import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
// import arduino from 'react-syntax-highlighter/dist/cjs/languages/hljs/arduino';
// import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
// import atelierCaveDark from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-cave-dark";
// SyntaxHighlighter.registerLanguage('arduino', arduino);

// Primary Chat Window
const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
  <section className="chatbox">
      <div className="chat-log">
        {chatLog.map((message, index) => (
          <ChatMessage key={index} message={message} />
        ))}
      </div>
        <div className="chat-input-holder">
      <form className="form" onSubmit={handleSubmit}>
          <input
          rows="1"
          value={chatInput}
          onChange={(e)=> setChatInput(e.target.value)}
          className="chat-input-textarea" ></input>
          <button className="submit" type="submit">Submit</button>
          </form>
        </div>
      </section>

// Individual Chat Message
const ChatMessage = ({ message }) => {
  return (
    <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
    <div className="chat-message-center">
      <div className={`avatar ${message.user === "gpt" && "chatgpt"}`}>
        {message.user === "gpt" ? <img className="ai-logo" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" src="../assets/images/user.svg" />}
      </div>
      {/* <div className="message">
        {message.message}
      </div> */}
       <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />
    </div>
  </div>
  )
}

export default ChatBox