<script lang="ts">
	import { onMount } from "svelte";
	import { fly, type FlyParams } from "svelte/transition";

	interface Props {
		options: FlyParams;
		children?: import("svelte").Snippet;
		cls?: string;
	}

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

	let visible = $state(false);
	let el = $state(undefined) as Element | undefined;

	onMount(() => {
		const observer = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						visible = true;
						observer.unobserve(entry.target);
					}
				});
			},
			{ threshold: 0.2 },
		);

		if (el) {
			observer.observe(el);
		}

		return () => observer.disconnect();
	});
</script>

<div bind:this={el} class={cls}>
	{#if visible}
		<div transition:fly={options}>
			{@render children?.()}
		</div>
	{/if}
</div>
