Alert Dialog

import {
	AlertDialog,
	AlertDialogTrigger,
	AlertDialogContent,
	AlertDialogHeader,
	AlertDialogFooter,
	AlertDialogTitle,
	AlertDialogDescription,
	AlertDialogAction,
	AlertDialogCancel,
	Button,
} from "@work-rjkashyap/unified-ui";

<AlertDialog>
	<AlertDialogTrigger asChild>
		<Button variant="danger">Delete</Button>
	</AlertDialogTrigger>
	<AlertDialogContent>
		<AlertDialogHeader>
			<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
			<AlertDialogDescription>
				This action is permanent and cannot be reversed.
			</AlertDialogDescription>
		</AlertDialogHeader>
		<AlertDialogFooter>
			<AlertDialogCancel>Cancel</AlertDialogCancel>
			<AlertDialogAction>Continue</AlertDialogAction>
		</AlertDialogFooter>
	</AlertDialogContent>
</AlertDialog>

const [open, setOpen] = useState(false);

function handleDeleteClick() {
	// Any logic before showing confirmation
	setOpen(true);
}

async function handleConfirm() {
	await deleteItem(item.id);
	setOpen(false);
}

<AlertDialog open={open} onOpenChange={setOpen}>
	<AlertDialogContent>
		<AlertDialogHeader>
			<AlertDialogTitle>Delete "{item.name}"?</AlertDialogTitle>
			<AlertDialogDescription>
				This item will be permanently deleted from your workspace.
			</AlertDialogDescription>
		</AlertDialogHeader>
		<AlertDialogFooter>
			<AlertDialogCancel onClick={() => setOpen(false)}>
				Cancel
			</AlertDialogCancel>
			<AlertDialogAction onClick={handleConfirm}>
				Delete
			</AlertDialogAction>
		</AlertDialogFooter>
	</AlertDialogContent>
</AlertDialog>;

function DeleteDialog({ onDelete }: { onDelete: () => Promise<void> }) {
	const [loading, setLoading] = useState(false);
	const [open, setOpen] = useState(false);

	const handleConfirm = async () => {
		setLoading(true);
		try {
			await onDelete();
			setOpen(false);
		} finally {
			setLoading(false);
		}
	};

	return (
		<AlertDialog open={open} onOpenChange={setOpen}>
			<AlertDialogTrigger asChild>
				<Button variant="danger">Delete</Button>
			</AlertDialogTrigger>
			<AlertDialogContent>
				<AlertDialogHeader>
					<AlertDialogTitle>Confirm deletion</AlertDialogTitle>
					<AlertDialogDescription>
						This cannot be undone. Are you sure you want to proceed?
					</AlertDialogDescription>
				</AlertDialogHeader>
				<AlertDialogFooter>
					<AlertDialogCancel disabled={loading}>
						Cancel
					</AlertDialogCancel>
					<AlertDialogAction
						onClick={(e) => {
							e.preventDefault(); // Prevent auto-close
							handleConfirm();
						}}
						disabled={loading}
						className="bg-danger text-danger-foreground hover:bg-danger/90"
					>
						{loading ? "Deleting..." : "Delete"}
					</AlertDialogAction>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
}