Cancel flow

"use client";
import * as React from "react";
import { CancelFlow } from "@/components/ui/notchset/blocks/cancel-flow";
import { Button } from "@/components/ui/notchset/button";

const REASONS = ["It costs too much", "I don't use it enough", "Answers weren't good enough", "I'm moving to another tool", "Something else"];

export default function CancelFlowDemo() {
  const [open, setOpen] = React.useState(false);
  const [ends, setEnds] = React.useState<string | null>(null);
  return (
    <div className="flex flex-col items-start gap-3">
      <p className="m-0 text-[var(--ns-ink-2)]">{ends ? `Plus ends on ${ends}. Your chats stay.` : "Plus · renews 14 Nov · Visa ending 4242"}</p>
      {ends ? <Button onClick={() => setEnds(null)}>Resubscribe</Button> : <Button onClick={() => setOpen(true)}>Cancel plan</Button>}
      <CancelFlow
        open={open}
        onOpenChange={setOpen}
        plan="Plus"
        endsOn="14 Nov"
        reasons={REASONS}
        keeps={["Every chat, project and document stays.", "Export everything any time."]}
        offer={(why) => (why === "It costs too much" ? { title: "Switch to Free instead", detail: "Fast and Balanced, a shorter limit, from 14 Nov. Nothing is lost.", label: "Switch to Free", onPick: () => setEnds("14 Nov") } : null)}
        onCancel={() => setEnds("14 Nov")}
      />
    </div>
  );
}