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

function App() {
  const [slot, setSlot] = useState('');
  const labels = { early: '10:00–11:00', late: '11:00–12:00' };
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <label>
        Collection window
        <select value={slot} onChange={(event) => setSlot(event.target.value)}>
          <option value="">Choose a window</option>
          <option value="early">10:00–11:00</option>
          <option value="late">11:00–12:00</option>
        </select>
      </label>
      <output>{slot ? 'Draft window: ' + labels[slot] : 'No window chosen'}</output>
    </main>
  );
}

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