<script lang="ts">
	import type { Snippet } from 'svelte';
	import { Dialog } from 'bits-ui';

	let {
		open = $bindable(false),
		title,
		children,
		onclose,
	}: {
		open?: boolean;
		title: string;
		children: Snippet;
		onclose?: () => void;
	} = $props();
</script>

<Dialog.Root
	bind:open
	onOpenChange={(next) => {
		if (!next) onclose?.();
	}}
>
	<Dialog.Portal>
		<Dialog.Overlay class="saas-modal-backdrop" />
		<Dialog.Content class="saas-modal">
			<div class="mb-4 flex items-start justify-between gap-3">
				<Dialog.Title class="text-lg font-semibold text-surface-900">{title}</Dialog.Title>
				<Dialog.Close class="saas-btn-ghost px-2! py-1! text-surface-600" aria-label="关闭">
					<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
					</svg>
				</Dialog.Close>
			</div>
			{@render children()}
		</Dialog.Content>
	</Dialog.Portal>
</Dialog.Root>
