10
export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {

16
  return (
17
    <li
18
      style={{
19
        display: "flex",
20
        alignItems: "center",
21
        gap: "0.5rem",
22
        padding: "0.5rem 0",
23
        borderBottom: "1px solid #eee",
24
      }}
25
    >
26
      <input
27
        type="checkbox"
28
        checked={todo.completed}
29
        onChange={() => onToggle(todo.id)}
30
      />
31
      <span
32
        style={{
33
          flex: 1,
34
          textDecoration: todo.completed ? "line-through" : "none",
35
          color: todo.completed ? "#888" : "inherit",
36
        }}
37
      >
38
        {todo.text}
39
      </span>
40
      {/* @todo Add a confirmation dialog before deleting */}
41
      <button onClick={() => onDelete(todo.id)} style={{ cursor: "pointer" }}>
42
        Delete
43
      </button>
44
    </li>
45
  );