Confirm button

"use client"

import * as React from "react"
import { ConfirmButton } from "@/components/candor/ui/confirm-button"
import { Button } from "@/components/candor/ui/button"

/*
 * The removals here stand in for your own service: the done label waits for its answer. The second one is refused,
 * and the button shows why. For a step that can't be taken back at all, use HoldToConfirm or TypeToConfirm instead.
 */
const remove = (ok: boolean) => new Promise<void>((resolve, reject) => setTimeout(() => (ok ? resolve() : reject(new Error("They still own 2 running agents. Hand those over first."))), 700))

export default function Example() {
  const [run, setRun] = React.useState(0)
  return (
    <div className="flex flex-col gap-6">
      <ConfirmButton key={`a-${run}`} label="Remove item" doneLabel="Removed" undo="You can restore it from Trash for 30 days." onConfirm={() => remove(true)} />
      <ConfirmButton
        key={`b-${run}`}
        form="roll"
        variant="outline"
        label="Remove member"
        confirmLabel="Press again to remove"
        doneLabel="Removed"
        undo="You can invite them again; their past work stays."
        onConfirm={() => remove(false)}
      />
      <Button variant="outline" size="sm" className="self-start" onClick={() => setRun((n) => n + 1)}>
        Reset the examples
      </Button>
    </div>
  )
}