'use client';

import { useList } from 'use-a-hook';

export default function TaskList() {
  const tasks = useList<{ id: string; title: string }>([]);
  return (
    <section>
      <button
        onClick={() =>
          tasks.append({ id: crypto.randomUUID(), title: 'Review invoice' })
        }
      >
        Add task
      </button>
      <ul>
        {tasks.items.map((task, index) => (
          <li key={task.id}>
            {task.title} <button onClick={() => tasks.removeAt(index)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={tasks.clear}>Clear local tasks</button>
    </section>
  );
}