import React from 'react';

function ItemList({ items, onUpdate, onDelete }) {
  const toggleCompleted = (item) => {
    onUpdate(item.id, { completed: !item.completed });
  };

  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {items.map((item) => (
        <li key={item.id} style={{ marginBottom: '0.5rem' }}>
          <span
            style={{
              textDecoration: item.completed ? 'line-through' : 'none',
              cursor: 'pointer',
            }}
            onClick={() => toggleCompleted(item)}
          >
            {item.name}: {item.description}
          </span>
          <button
            onClick={() => onDelete(item.id)}
            style={{ marginLeft: '1rem' }}
          >
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

export default ItemList;