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

function App() {
  const [draft, setDraft] = useState('');
  const [item, setItem] = useState('basket');
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <label>
        Item
        <select value={item} onChange={(event) => setItem(event.target.value)}>
          <option value="basket">Basket</option>
          <option value="stool">Stool</option>
        </select>
      </label>
      <label>
        Shared draft note
        <input value={draft} onChange={(event) => setDraft(event.target.value)} />
      </label>
      <output>
        {item}: {draft || 'no note'}
      </output>
      <p>This design deliberately keeps one shared draft when the item changes.</p>
    </main>
  );
}

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