import React from 'react';

function TodoList({ todos, onToggle, onDelete }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => onToggle(todo.id, !todo.completed)}
          />
          {todo.title}
          <button onClick={() => onDelete(todo.id)} style={{ marginLeft: '1rem' }}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;