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

function App() {
  const [items, setItems] = useState([
    { id: 'hinge', name: 'Check hinges', done: false },
    { id: 'feet', name: 'Check feet', done: false },
  ]);
  function toggle(id) {
    setItems((rows) =>
      rows.map((row) => (row.id === id ? { ...row, done: !row.done } : row)),
    );
  }
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <label>
              <input
                type="checkbox"
                checked={item.done}
                onChange={() => toggle(item.id)}
              />
              {item.name}
            </label>
          </li>
        ))}
      </ul>
      <output>
        {items.filter((item) => item.done).length} of {items.length} checked
      </output>
    </main>
  );
}

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