/**
 * The shape of a task
 */
interface Task {
  id: number;
  name: string;
}

/**
 * The props for the TaskList component
 */
interface TaskProps {
  tasks: Task[];
}

/**
 * A simple list of tasks
 * @param props - The tasks to display
 * @returns {JSX.Element} The task list
 * @example
 * const tasks = [{ id: 1, name: "Do the thing" }];
 * return <TaskList tasks={tasks} />;
 */
export function TaskList(props: TaskProps): JSX.Element {
  return (
    <div>
      <h1>Task List</h1>
      <p>Tasks go here</p>
      <ul>
        {props.tasks.map((task) => (
          <li key={task.id}>{task.name}</li>
        ))}
      </ul>
    </div>
  );
}