<script lang="ts">
	/* eslint-disable @typescript-eslint/no-explicit-any */
	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
	let {
		archivingRecord,
		archiveData,
		enhanceArchive,
		onClose,
		recordName
	}: {
		archivingRecord: any;
		archiveData: any;
		enhanceArchive: any;
		onClose: () => void;
		recordName: any;
	} = $props();
</script>

<AlertDialog.Root open={!!archivingRecord} onOpenChange={(open) => !open && onClose()}>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<AlertDialog.Title>Archive booking?</AlertDialog.Title>
			<AlertDialog.Description
				>This will hide {recordName(archivingRecord)} from active bookings. The record will remain in
				the database.</AlertDialog.Description
			>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
			{#if archivingRecord}
				<form method="POST" action="?/archive" use:enhanceArchive>
					<input type="hidden" name="id" value={$archiveData.id} />
					<AlertDialog.Action type="submit" variant="destructive"
						>Archive booking</AlertDialog.Action
					>
				</form>
			{/if}
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>
