export function ItemList({ listItems, handelDelete }) {
  return listItems.map((item) => (
    <li key={item.key}>
      <span>{item.memoContent}</span>
      <button onClick={() => handelDelete(item.key)}>Delete</button>
    </li>
  ));
}

export default function App() {
  const listItemsInitial = [
    { key: 1, memoContent: 'Walk the dog' },
    { key: 2, memoContent: 'Water the plants' },
    { key: 3, memoContent: 'Wash the dishes' },
  ];

  const [inputValue, setInputValue] = useState('');
  const [listItems, setListItems] = useState(listItemsInitial);

  const handelInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handelDelete = (key) => {
    setListItems((prevItems) => prevItems.filter((item) => item.key !== key));
    console.log(listItems);
  };

  const handleSubmit = () => {
    setListItems((prevItems) => [
      ...prevItems,
      {
        key: listItems.length + 1,
        memoContent: inputValue,
      },
    ]);
    setInputValue('');
  };

  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          placeholder="Add your task"
          value={inputValue}
          onChange={handelInputChange}
        />
        <div>
          <button
            onClick={handleSubmit}
            disabled={inputValue === ''}
          >
            Submit
          </button>
        </div>
      </div>
      <ul>{ItemList({ listItems, handelDelete })}</ul>
    </div>
  );
}