// import React, { useState, useEffect, useRef } from 'react';
// import { InputText } from 'primereact/inputtext';
// import { Button } from 'primereact/button';
// import { Toast } from 'primereact/toast';
// import { Dialog } from 'primereact/dialog';
// import { Card } from 'primereact/card';
// import io, { Socket } from 'socket.io-client';

// interface ChatProps {
//   serverUrl: string;
// }

// const Chat: React.FC<ChatProps> = ({ serverUrl }) => {
//   const [messages, setMessages] = useState<string[]>([]);
//   const [inputText, setInputText] = useState('');
//   const [showChat, setShowChat] = useState(false);
//   const socketRef = useRef<Socket | null>(null);
//   const toastRef = useRef<Toast | null>(null);

//   useEffect(() => {
//     socketRef.current = io(serverUrl);
//     socketRef.current.emit('join', 'global');

//     socketRef.current.on('connect', () => {
//       showToast('success', 'Connected to the chat server');
//     });

//     socketRef.current.on('disconnect', () => {
//       showToast('warn', 'Disconnected from the chat server');
//     });

//     socketRef.current.on('message', (message: string) => {
//       setMessages((prevMessages) => [...prevMessages, message]);
//     });

//     return () => {
//       if (socketRef.current) {
//         socketRef.current.disconnect();
//       }
//     };
//   }, [serverUrl]);

//   const handleSendMessage = () => {
//     if (inputText.trim() === '') {
//       return;
//     }

//     if (socketRef.current) {
//       socketRef.current.emit('message', inputText);
//     }
//     setInputText('');
//   };

//   const toggleChat = () => {
//     setShowChat((prevShowChat) => !prevShowChat);
//   };

//   const showToast = (severity: any, detail: string) => {
//     if (toastRef.current) {
//       toastRef.current.show({
//         severity,
//         summary: severity === 'success' ? 'Success' : 'Warning',
//         detail,
//         life: 3000,
//       });
//     }
//   };

//   const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
//     if (event.key === 'Enter') {
//       handleSendMessage();
//     }
//   };

//   return (
//     <>
//       <div className="chat-icon" onClick={toggleChat}>
//         <h3>Click to chat</h3>
//       </div>
//       <Dialog
//         visible={showChat}
//         onHide={toggleChat}
//         className="chat-dialog"
//         modal
//       >
//         <Card title="Chat" className="chat-card">
//           <div className="chat-container">
//             {messages.map((message, index) => (
//               <div key={index} className="message">
//                 <span className="message-content">{message}</span>
//               </div>
//             ))}
//           </div>
//           <div className="input-container">
//             <InputText
//               value={inputText}
//               onChange={(e) => setInputText(e.target.value)}
//               onKeyDown={handleInputKeyDown}
//               placeholder="Type a message..."
//             />
//             <Button label="Send" onClick={handleSendMessage} />
//           </div>
//         </Card>
//       </Dialog>
//       <Toast ref={toastRef} position="bottom-left" className="bottom-0" />{' '}
//     </>
//   );
// };

// export default Chat;
