Stage checklist

"use client";
import * as React from "react";
import { StageChecklist } from "@/components/ui/notchset/blocks/stage-checklist";
import { Button } from "@/components/ui/notchset/button";

export default function StageChecklistDemo() {
  const [done, setDone] = React.useState<string[]>(["quote"]);
  const [round, setRound] = React.useState(0);
  /* the remaining conditions come true one by one, as they would in the app */
  /* one replay at a time: a new one cancels the last one's timers, and leaving cancels them all */
  const timers = React.useRef<ReturnType<typeof setTimeout>[]>([]);
  const clear = () => {
    timers.current.forEach(clearTimeout);
    timers.current = [];
  };
  React.useEffect(() => clear, []);
  const play = () => {
    clear();
    setDone(["quote"]);
    setRound((n) => n + 1);
    timers.current.push(setTimeout(() => setDone(["quote", "buyer"]), 600), setTimeout(() => setDone(["quote", "buyer", "date"]), 1300));
  };
  return (
    <div className="flex w-full max-w-[420px] flex-col gap-3">
      <StageChecklist
        key={round}
        title="Proposal usually needs"
        items={[
          { id: "quote", label: "Pricing sent", done: done.includes("quote") },
          { id: "buyer", label: "The economic buyer has seen it", done: done.includes("buyer"), hint: "Forward the quote to Ines Duarte" },
          { id: "date", label: "A decision date agreed", done: done.includes("date"), hint: "Ask on Thursday's call" },
        ]}
        action={
          <Button size="sm" variant="primary">
            Move to Security review
          </Button>
        }
      />
      <Button size="sm" className="self-start" onClick={play}>
        Play it
      </Button>
    </div>
  );
}