import React, { useState } from 'react';
import axios from 'axios';

const Chatbot = () => {
  const [input, setInput] = useState('');
  const [conversation, setConversation] = useState([]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value);
  };

  const handleSendMessage = () => {
    const newMessage = { text: input, sender: 'user' };
    setConversation((prevConversation) => [...prevConversation, newMessage]);
    axios.post('https://example.com/api/chatbot', { input })
      .then((response) => {
        const botResponse = { text: response.data, sender: 'bot' };
        setConversation((prevConversation) => [...prevConversation, botResponse]);
      })
      .catch((error) => {
        console.error(error);
      });
    setInput('');
  };

  return (
    <div className="max-w-md mx-auto p-4 bg-gray-100 rounded-md shadow-md">
      <h1 className="text-lg font-bold mb-4">Chatbot</h1>
      <ul className="mb-4">
        {conversation.map((message, index) => (
          <li key={index} className={`text-lg ${message.sender === 'user' ? 'text-blue-600' : 'text-green-600'}`}>
            {message.text}
          </li>
        ))}
      </ul>
      <input
        type="text"
        value={input}
        onChange={handleInputChange}
        className="w-full p-2 mb-4 border border-gray-400 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
      />
      <button
        onClick={handleSendMessage}
        className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
      >
        Send
      </button>
    </div>
  );
};

export default Chatbot;