import React, { useMemo, useCallback, useState } from 'react'

const TodoItem = React.memo(({ item, onToggle, onDelete }) => {
    console.log(`rendred ${item.id}`);
    return <li>
            {item.name}
            <button onClick={() => onToggle(item.id)}>Done</button>
            <button onClick={() => onDelete(item.id)}>remove</button>
        </li>
})

function ItemList({ items }) {

    const handleToggle = useCallback(id => {
        items.done = true;
        console.log(`Item ${id} done`)
        console.log(id)
    },[]);
    
    const handleDelete = useCallback(id => {
        items.pop(id);
    },[]);
    return (
        <>
            <h3>List items</h3>
            {items.map(item => (
             <TodoItem key={item.id} item={item}
              onToggle={handleToggle} onDelete={handleDelete} />
             ))}
        </>
    )
}

function App() {
	return (
		<>
			{/* Добавьте тестовый контент для проверки */}
			<h1>Hello, React!</h1>
            <ItemList items={[
                {id:1,name:'Первый',done:false},
                {id:2,name:'Второй',done:false}
            ]} />
		</>
	)
}

export default App