import react, { useState } from 'react';
import { input } from './components/ui/input';
import { textarea } from './components/ui/textarea';
import { button } from './components/ui/button';

const ircchat = () => {
  const [username, setUsername] = useState('');
  const [message, setMessage] = useState('');
  const [chatLog, setChatLog] = useState([]);

  const handleUsernameChange = (e: react.ChangeEvent<HTMLInputElement>) => {
    setUsername(e.target.value);
  };

  const handleMessageChange = (e: react.ChangeEvent<HTMLTextAreaElement>) => {
    setMessage(e.target.value);
  };

  const handleSendMessage = () => {
    setChatLog([...chatLog, { username, message }]);
    setMessage('');
  };

  return (
    <div className="flex flex-col h-screen p-4">
      <input
        type="text"
        value={username}
        onChange={handleUsernameChange}
        placeholder="Username"
        className="p-2 mb-4 border border-gray-400 rounded"
      />
      <textarea
        value={message}
        onChange={handleMessageChange}
        placeholder="Message"
        className="p-2 mb-4 border border-gray-400 rounded"
      />
      <button
        onClick={handleSendMessage}
        className="p-2 mb-4 bg-blue-500 text-white rounded"
      >
        Send
      </button>
      <div className="flex-1 overflow-y-scroll">
        {chatLog.map((log, index) => (
          <div key={index} className="mb-4">
            <span className="font-bold">{log.username}:</span> {log.message}
          </div>
        ))}
      </div>
    </div>
  );
};

export default ircchat;