Proposal

"use client"

import * as React from "react"
import { Proposal, type ProposalOption } from "@/components/candor/proposal"

const proposed: ProposalOption = {
  id: "refund-duplicate",
  label: "Refund the duplicate charge",
  detail: "Returns $84.20 to the card the second payment came from. The first payment stands.",
  reason: "Both charges have the same amount, card and basket, 40 seconds apart.",
  confidence: { value: "high", basis: "The payment service lists both charges with one basket id" },
}

const alternatives: ProposalOption[] = [
  {
    id: "credit",
    label: "Add $84.20 as store credit",
    detail: "Nothing goes back to the card; the customer can spend it on the next order.",
    reason: "Faster to settle, but the customer asked for their money back.",
    confidence: { value: "low", basis: "Nothing in the conversation says the customer would accept credit" },
  },
  {
    id: "ask-bank",
    label: "Ask the customer for a bank statement first",
    reason: "Would confirm the second charge settled, at the cost of a day or two.",
  },
]

export default function Example() {
  const [log, setLog] = React.useState("")
  return (
    <div className="flex max-w-xl flex-col gap-2">
      {/* Nothing is chosen until the person chooses: Accept says so until they pick the proposal or an alternative. */}
      <Proposal
        agent="Billing agent"
        title="Order #4471 was charged twice"
        proposed={proposed}
        alternatives={alternatives}
        onAccept={(o) => setLog(`Accepted: ${o.id}`)}
        onEdit={(o) => setLog(`Editing: ${o.id}`)}
        onDecline={() => setLog("Declined")}
      />
      <p className="text-xs text-muted-foreground">{log || "Nothing decided yet."}</p>
    </div>
  )
}