import React, { StrictMode, useActionState } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

async function preview(previous, data) {
  await new Promise((resolve) => setTimeout(resolve, 80));
  const item = String(data.get('item') || '').trim();
  return item.length < 2
    ? 'Use at least two characters'
    : 'Local action preview: ' + item + '. Not saved.';
}
function App() {
  const [message, action, pending] = useActionState(preview, 'No action yet');
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <form action={action}>
        <label>
          Item
          <input name="item" required defaultValue="Basket" />
        </label>
        <button disabled={pending}>
          {pending ? 'Preparing…' : 'Prepare local preview'}
        </button>
      </form>
      <output aria-live="polite">{message}</output>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);