<script lang="ts">
	import clsx from 'clsx';
	import type { Snippet } from 'svelte';
	import type { SvelteHTMLElements } from 'svelte/elements';
	import { twMerge } from 'tailwind-merge';

	type Props = SvelteHTMLElements['dialog'] & {
		actions?: Snippet;
		backdrop?: boolean;
		dialog?: HTMLDialogElement;
	};

	let {
		actions,
		backdrop,
		dialog = $bindable(),
		children,
		class: className,
		...props
	}: Props = $props();
</script>

<dialog {...props} class={twMerge('modal', clsx(className))} bind:this={dialog}>
	<div class="modal-box">
		{@render children?.()}
		{#if actions}
			<div class="modal-action">
				{@render actions()}
			</div>
		{/if}
	</div>
	{#if backdrop}
		<form method="dialog" class="modal-backdrop">
			<button>close</button>
		</form>
	{/if}
</dialog>