import React from "react";

const ChatPanel = ({ threads, activeThread, setActiveThread, createNewThread }) => {
  return (
    <div
      style={{
        width: "20%",
        borderRight: "1px solid #333",
        backgroundColor: "#121212", // Dark background
        padding: "10px",
      }}
    >
      <button
        onClick={createNewThread}
        style={{
          marginBottom: "10px",
          padding: "10px",
          width: "100%",
          backgroundColor: "#333",
          color: "#f5f5f5",
          border: "none",
          cursor: "pointer",
          borderRadius: "5px",
        }}
      >
        New Thread
      </button>
      <ul style={{ listStyle: "none", padding: 0, color: "#f5f5f5" }}>
        {threads.map((thread) => (
          <li
            key={thread}
            onClick={() => setActiveThread(thread)}
            style={{
              padding: "10px",
              cursor: "pointer",
              backgroundColor: thread === activeThread ? "#333" : "transparent",
              borderRadius: "5px",
              color: thread === activeThread ? "#fff" : "#aaa",
            }}
          >
            {thread}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ChatPanel;