<script lang="ts">
	import { onMount } from "svelte";

	type ClientOnlyProps = {
		/**
		 * If true, render `fallback` content until the component mounts on the client.
		 * Defaults to true.
		 */
		showFallback?: boolean;

		/**
		 * Main content to render once mounted (client-only).
		 */
		children: import("svelte").Snippet;

		/**
		 * Optional fallback content to render during SSR / before mount.
		 */
		fallback?: import("svelte").Snippet;
	};

	let { showFallback = true, children, fallback }: ClientOnlyProps = $props();

	let mounted = $state(false);

	onMount(() => {
		mounted = true;
	});
</script>

{#if mounted}
	{@render children()}
{:else if showFallback && fallback}
	{@render fallback()}
{/if}
