const { useState, Suspense, use, useActionState } = React;

// ── use() — unwrap a promise in render ──
function PostContent({ promise }) {
  const post = use(promise);  // suspends until resolved
  return (
    <div>
      <h4>{post.title}</h4>
      <p>{post.body}</p>
    </div>
  );
}

// ── useActionState — form with pending state ──
async function submitAction(prevState, formData) {
  const name = formData.get('name');
  await new Promise(r => setTimeout(r, 1000));
  if (!name) return { ok: false, message: 'Name is required' };
  return { ok: true, message: `Saved "${name}" ✓` };
}

function FormDemo() {
  const [state, formAction, isPending] =
    useActionState(submitAction, null);

  return (
    <form action={formAction}>
      <input name="name" />
      <button disabled={isPending}>
        {isPending ? '...' : 'Save'}
      </button>
    </form>
  );
}