<script>
	import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from "@sveltestrap/sveltestrap";

	let {
		isOpen = $bindable(false),
		title = "Confirm Action",
		confirmText = "Confirm",
		cancelText = "Cancel",
		confirmVariant = "primary",
		cancelVariant = "secondary",
		onconfirm,
		oncancel,
		children,
	} = $props();

	function handleConfirm() {
		onconfirm?.();
		isOpen = false;
	}

	function handleCancel() {
		oncancel?.();
		isOpen = false;
	}
</script>

<Modal {isOpen} toggle={handleCancel} fade={false} backdrop={true}>
	<ModalHeader toggle={handleCancel}>{title}</ModalHeader>
	<ModalBody>
		{#if children}
			{@render children()}
		{:else}
			Вы действительно хотите продолжить?
		{/if}
	</ModalBody>
	<ModalFooter>
		<Button color={cancelVariant} on:click={handleCancel}>
			{cancelText}
		</Button>
		<Button color={confirmVariant} on:click={handleConfirm}>
			{confirmText}
		</Button>
	</ModalFooter>
</Modal>
