Next step

"use client";
import * as React from "react";
import { NextStep } from "@/components/ui/notchset/blocks/next-step";

/* the choices offered and the words a saved step shows come from one list; the block adds "Due" itself */
const DUES = [
  { label: "Tomorrow", value: 1 },
  { label: "In 3 days", value: 3 },
  { label: "Next week", value: 7 },
];
const when = (due: number) => (DUES.find((d) => d.value === due)?.label ?? `In ${due} days`).toLowerCase();

export default function NextStepDemo() {
  const [task, setTask] = React.useState<{ title: string; due: number; who: string } | undefined>({ title: "Send the order form to Ana", due: 1, who: "Ana Ruiz" });
  const [adding, setAdding] = React.useState(false);
  return (
    <div className="w-full max-w-md">
      <NextStep
        task={task && { title: task.title, when: when(task.due), who: task.who }}
        done={false}
        onDone={() => setTask(undefined)}
        adding={adding}
        onAddingChange={setAdding}
        onAdd={(title, due) => {
          setTask({ title, due, who: "Ana Ruiz" });
          setAdding(false);
        }}
        suggestions={["Book the security review", "Send the DPA"]}
        dues={DUES}
      />
    </div>
  );
}