import React from 'react';

function TodoList({ todos, onToggle, onDelete }) {
  if (!todos.length) return <p>No todos yet.</p>;

  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {todos.map((todo) => (
        <li key={todo.id} style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => onToggle(todo.id, !todo.completed)}
          />
          <span style={{ flexGrow: 1, marginLeft: '0.5rem', textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.title}
          </span>
          <button onClick={() => onDelete(todo.id)} style={{ marginLeft: '0.5rem' }}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;