Reason prompt

"use client";
import * as React from "react";
import { ReasonPrompt } from "@/components/ui/notchset/blocks/reason-prompt";

export default function ReasonPromptDemo() {
  /* undefined: still asking; null: skipped */
  const [asked, setAsked] = React.useState<string | null | undefined>(undefined);
  return asked === undefined ? (
    <ReasonPrompt question="Why did it slip?" context="Dec 20 → Jan 16, out of the quarter" reasons={["Budget", "Timing", "Champion left", "Competitor", "Other"]} onPick={setAsked} onSkip={() => setAsked(null)} />
  ) : (
    <span className="text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">
      {asked ? `Saved: ${asked}.` : "Skipped."}{" "}
      <button type="button" className="cursor-pointer text-[var(--ns-ink)] underline underline-offset-2" onClick={() => setAsked(undefined)}>
        Ask again
      </button>
    </span>
  );
}