Settling card

"use client"

import * as React from "react"
import { CardRegistryProvider, defineCard, isObject, isString } from "@/components/candor/card-registry"
import { SettlingCard, useCardSettlement } from "@/components/candor/settling-card"
import { Button } from "@/components/candor/ui/button"
import { Locked } from "@/components/candor/locked"

/** The card's own action is locked until the service confirms the write. */
function RefundCard({ amount, order }: { amount: string; order: string }) {
  const settlement = useCardSettlement()
  return (
    <div className="flex items-center justify-between gap-3 rounded-lg border bg-card px-3 py-2.5 text-sm">
      <span>
        Refund {amount} on order {order}
      </span>
      <Locked reason={settlement === "pending" ? "Waiting for the service to confirm" : settlement === "failed" ? "Nothing to undo: it wasn’t applied" : undefined}>
        <Button size="xs" variant="outline">
          Undo
        </Button>
      </Locked>
    </div>
  )
}

const cards = {
  refund: defineCard<{ amount: string; order: string }>({
    label: "Refund",
    check: (p) => (isObject(p) && isString(p.amount) && isString(p.order) ? null : "it needs an amount and an order"),
    render: (p) => <RefundCard {...p} />,
  }),
}

export default function Example() {
  const [settlement, setSettlement] = React.useState<"pending" | "settled" | "failed">("pending")
  return (
    <CardRegistryProvider cards={cards}>
      <div className="flex max-w-lg flex-col gap-3">
        <SettlingCard
          name="refund"
          props={{ amount: "£40.00", order: "1042" }}
          summary="Refund £40.00 on order 1042"
          settlement={settlement}
          service="the billing service"
          failure="The card on file has expired."
          onRetry={() => setSettlement("pending")}
        />
        <div className="flex gap-2">
          <Button size="xs" variant="ghost" onClick={() => setSettlement("settled")}>
            The service confirms
          </Button>
          <Button size="xs" variant="ghost" onClick={() => setSettlement("failed")}>
            The service refuses
          </Button>
        </div>
      </div>
    </CardRegistryProvider>
  )
}