// Syntax highlighting: JavaScript (React)

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [message, setMessage] = useState('');
  const [chatHistory, setChatHistory] = useState([]);

  const handleInputChange = (e) => {
    setMessage(e.target.value);
  };

  const handleSendMessage = () => {
    if (message.trim() !== '') {
      setChatHistory([...chatHistory, { type: 'user', content: message }]);
      fetch(`https://api.hashnode.com/?query={search(query:"${message}")}`)
        .then((response) => response.json())
        .then((data) => {
          setChatHistory([...chatHistory, { type: 'bot', content: data.data.search[0].title }]);
        });
      setMessage('');
    }
  };

  return (
    <div className="App">
      <div className="chat-container">
        {chatHistory.map((chat, index) => (
          <div key={index} className={`chat-message ${chat.type}`}>
            {chat.content}
          </div>
        ))}
      </div>
      <div className="input-container">
        <input
          type="text"
          value={message}
          onChange={handleInputChange}
          placeholder="Type your message here..."
        />
        <button onClick={handleSendMessage}>Send</button>
      </div>
    </div>
  );
};

export default App;