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

function ItemSummary({ names }) {
  const visible = names.filter((name) => name.includes('a'));
  return <p>{visible.join(', ')}</p>;
}
function App() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button onClick={() => setCount((value) => value + 1)}>
        Review compiled view
      </button>
      <output>Reviews: {count}</output>
      <ItemSummary names={['Basket', 'Lamp', 'Stool']} />
    </main>
  );
}

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