// main.tsx
import { MQTTClient, MqttProvider } from "@visualsource/react-use-paho-mqtt";

const client = new MQTTClient({
  host: "test.mosquitto.org",
  useSSL: true,
  port: 8091,
  userName: "ro",
  password: "readonly",
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MqttProvider client={client}>
      <App />
    </MqttProvider>
  </React.StrictMode>
);

// App.tsx
import {
  useSubscription,
  useMqtt,
  type MessageEvent,
} from "@visualsource/react-use-paho-mqtt";

function App() {
  const mqtt = useMqtt();
  const onMessage = useCallback((ev: MessageEvent) => {
    const { payloadString, destinationName } = ev.detail;
    console.log(`Topic ${destinationName}, Payload: ${payloadString}`)
  },[]);

  useSubscription("/message/example", onMessage);

  return (
    <button
      onClick={() => {
        mqtt.publish("/message/example", "Payload");
      }}
    >
      Btn
    </button>
  );
}