import React, { useEffect, useState } from 'react';
import { Client } from '@stomp/stompjs';

const SOCKET_URL = 'ws://10.1.14.118:8088/ws';

const MyComponent = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    let onConnected = () => {
      console.log("Connected!!")
      client.subscribe('/topic/meeting/47/check-in', function (msg) {
        if (msg.body) {
          var jsonBody = JSON.parse(msg.body);
          if (jsonBody.message) {
            setMessages(jsonBody.message);
          }
        }
      });
    }

    let onDisconnected = () => {
      console.log("Disconnected!!")
    }

    const jwtToken = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImlhdCI6MTcxNDYzNTMwOCwiZXhwIjoxNzE0NzIxNzA4fQ.25H0-1OHox4lA9O3SmiA3tdeBNtaGfwKNlct6nt2MRCeVaenAo7qzw8HfLdqrIpCmJYwZXdfhGz6kYSVzdNl7g';
    const brokerURL = `${SOCKET_URL}?token=${jwtToken}`;

    const client = new Client({
      brokerURL,
      reconnectDelay: 5000,
      heartbeatIncoming: 4000,
      heartbeatOutgoing: 4000,
      onConnect: onConnected,
      onDisconnect: onDisconnected
    });

    client.activate();

    return () => {
      client.deactivate();
    };
  }, []);

  // Rest of your component
};

export default MyComponent;