<!-- src/routes/LitStatus.svelte -->

<script>
	import { onMount } from 'svelte';
	import Lit from '../lit';

	let networkStatus = 'Disconnected';
	let isNetworkLoading = true;

	// Connect to the LIT network on component mount
	onMount(() => {
		Lit.connect();

		// Define the event handler
		const handleLitReady = () => {
			networkStatus = 'Connected';
			isNetworkLoading = false;
		};

		// Listen for the lit-ready event
		document.addEventListener('lit-ready', handleLitReady, false);

		// Cleanup the event listener on component destroy
		return () => {
			document.removeEventListener('lit-ready', handleLitReady);
		};
	});
</script>

<div class="bg-gray-100 p-4 rounded-lg shadow-md mb-4">
	{#if isNetworkLoading}
		<p class="text-gray-700 font-medium">
			LIT Network Status: <span class="text-blue-500">Loading ...</span>
		</p>
	{:else}
		<p class="text-gray-700 font-medium">
			LIT Network Status: <span class="text-green-600">{networkStatus}</span>
		</p>
	{/if}
</div>
