Confirmation Dialog

import { Surface } from 'imperative-surface';
import type { SurfaceContext } from 'imperative-surface';

function ConfirmDialog({ pop }: SurfaceContext<boolean>) {
  return (
    <Surface.Body>
      <Surface.Header
        title="Delete project?"
        centerTitle
        onPop={() => pop(false)}
      />

      <Surface.Content>
        <p>
          This will permanently delete the project.
        </p>
      </Surface.Content>

      <Surface.Footer>
        <button onClick={() => pop(false)}>
          Cancel
        </button>

        <button onClick={() => pop(true)}>
          Delete
        </button>
      </Surface.Footer>
    </Surface.Body>
  );
}

export async function confirmDelete() {
  return Surface.Dialog.present<boolean>({
    body: ConfirmDialog,
    barrierDismissible: false,
  });
}

if (await confirmDelete()) {
  await deleteProject();
}