<script lang="ts">
	import type { Snippet } from "svelte";
	import { browser } from "$app/environment";

	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: Snippet;

		/**
		 * Optional fallback content to render during SSR / before mount.
		 */
		fallback?: Snippet;
	};

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

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