<script lang="ts" generics="T = unknown">
	import type { PopupState } from '@svelte-thing/primitives/dialog/popup';
	import type { Snippet } from 'svelte';
	import type { HTMLAttributes } from 'svelte/elements';

	import { popupProps } from './popupProps.svelte.js';

	interface Props<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
		children?: Snippet<[PopupState<T>]>;
		initialData?: T;
	}

	const { children, class: className, initialData, ...restProps }: Props<T> = $props();

	const { mergeRestProps, popup } = popupProps<T>({
		get class() {
			return className;
		},
		get initialData() {
			return initialData;
		},
	});

	const mergedProps = $derived(mergeRestProps(restProps));
</script>

{#if popup.shouldRender}
	<div {...mergedProps}>
		{@render children?.(popup)}
	</div>
{/if}
