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

const items = [
  { id: 'stool', name: 'Folding stool', available: true },
  { id: 'lamp', name: 'Desk lamp', available: false },
  { id: 'basket', name: 'Market basket', available: true },
];
function App() {
  const ready = items.filter((item) => item.available);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <ul>
        {ready.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <output>{ready.length} items ready</output>
    </main>
  );
}

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