<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import type { Snippet } from "svelte";
  import type { MatrixClient } from "matrix-js-sdk";
  import { setMatrixContext } from "$lib/matrix/context";
  import { setupSyncHandlers, removeSyncHandlers } from "$lib/matrix/sync";

  interface Props {
    client: MatrixClient;
    children: Snippet;
  }

  let { client, children }: Props = $props();

  // Store client reference for cleanup
  let clientRef = client;

  // Set the context during component initialization
  setMatrixContext(clientRef);

  // Setup sync handlers when provider mounts
  onMount(() => {
    setupSyncHandlers(clientRef);
  });

  // Cleanup when provider unmounts
  onDestroy(() => {
    removeSyncHandlers(clientRef);
  });
</script>

{@render children()}
