Result button

"use client"

import * as React from "react"
import { ResultButton, type ResultButtonState } from "@/components/candor/ui/result-button"

/*
 * The service here stands in for your own: `done` is set only when it confirms the save, never when the request goes
 * out, so the tick is drawn for something that happened. The second button's service fails, and says why.
 */
const service = (ok: boolean) => new Promise<void>((resolve, reject) => setTimeout(() => (ok ? resolve() : reject(new Error("The draft was changed by someone else."))), 900))

export default function Example() {
  const [saved, setSaved] = React.useState<ResultButtonState>("idle")
  const [sent, setSent] = React.useState<ResultButtonState>("idle")
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ResultButton
        state={saved}
        labels={{ idle: "Save draft", working: "Saving…", done: "Saved", failed: "Couldn't save" }}
        resetAfter={2500}
        onReset={() => setSaved("idle")}
        onClick={async () => {
          setSaved("working")
          await service(true)
          // The confirmation, not the request, sets done.
          setSaved("done")
        }}
      />
      <ResultButton
        form="morph"
        variant="outline"
        state={sent}
        labels={{ idle: "Send for review", working: "Sending…", done: "Sent for review", failed: "Couldn't send: the draft changed" }}
        onClick={async () => {
          setSent("working")
          try {
            await service(false)
            setSent("done")
          } catch {
            setSent("failed")
          }
        }}
      />
    </div>
  )
}