import { useEffect } from 'react';
import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react';
import MyMeeting from './my-meeting';

export default function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    initMeeting({
      authToken: '<auth-token>',
      defaults: {
        audio: false,
        video: false,
      },
    });
  }, []);

  return (
    <RealtimeKitProvider value={meeting} fallback={<i>Loading...</i>}>
      {/* Render your UI here. Subcomponents can now use the `useRealtimeKitMeeting` and `useRealtimeKitSelector` hooks */}
      <MyMeeting />
    </RealtimeKitProvider>
  );
}