Todo list

import { useState } from "react"
import { TodoList, type TodoItem } from "@/components/ui/todo-list"
import { type ApprovalStatus, type ToolStatus } from "@/components/ui/approvals"

export function TodoListDemo() {
  const [stage] = useState(0);
  const [tool] = useState<ToolStatus>("awaiting");
  const [approval] = useState<ApprovalStatus>("pending");
  const status = (n: number, skipped = false): TodoItem["status"] => (skipped ? "skipped" : stage > n ? "done" : stage === n ? "active" : "pending");
  const items: TodoItem[] = [
      { id: "read", title: "Read the current table component", status: stage === 0 ? "pending" : tool === "denied" ? (stage > 1 ? "skipped" : "active") : status(1), detail: tool === "denied" ? "Skipped because the file read was not allowed." : undefined },
      { id: "write", title: "Write the sort helper", status: status(2) },
      { id: "clean", title: "Remove stale snapshots", status: approval === "denied" ? (stage > 3 ? "skipped" : "active") : status(3), detail: approval === "denied" ? "Left in place." : undefined },
      { id: "sum", title: "Summarise the changes", status: stage >= 5 ? "done" : stage === 4 ? "active" : "pending" },
    ];
  return (
    <TodoList label="Agent plan" items={items} />
  );
}