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

function App() {
  const [loan, setLoan] = useState({
    item: 'Market basket',
    pickup: { desk: 'North', hour: '10:00' },
  });
  function move() {
    setLoan((previous) => ({
      ...previous,
      pickup: { ...previous.pickup, hour: '11:00' },
    }));
  }
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <p>
        {loan.item} · {loan.pickup.desk}
      </p>
      <button onClick={move}>Move pickup to 11:00</button>
      <output>Pickup: {loan.pickup.hour}</output>
    </main>
  );
}

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