HITL Approval Card

import { HitlApprovalCard } from '@/components/ui/hitl-approval-card'

'use client'

import { useCallback, useState } from 'react'
import {
  HitlApprovalCard,
  type HitlState,
} from '@/components/ui/hitl-approval-card'

const PAYLOAD = `{
  "amount": 124000,
  "currency": "usd",
  "customer": "cus_AcmeLog9k2",
  "reason": "requested_by_customer",
  "metadata": {
    "invoice": "inv_2026_03_8841",
    "agent": "meridian-ops"
  }
}`

export default function HitlApprovalCardDemo() {
  const [state, setState] = useState<HitlState>('pending')

  const resolve = useCallback((next: HitlState) => {
    // brief beat so the press settle reads before the receipt
    window.setTimeout(() => setState(next), 280)
  }, [])

  return (
    <div className="mx-auto flex min-h-[520px] w-full max-w-lg flex-col justify-center px-4 py-12 sm:px-6 sm:py-16">
      <HitlApprovalCard
        action="Issue a $1,240 refund to Acme Logistics"
        tool="stripe.refunds.create"
        rationale="Invoice inv_2026_03_8841 was double-charged on the March close pack; customer ops confirmed the duplicate in Xero."
        risk="medium"
        payload={PAYLOAD}
        state={state}
        onAllowOnce={() => resolve('allowed')}
        onAllowAlways={() => resolve('allowed')}
        onDeny={() => resolve('denied')}
      />
      {state !== 'pending' && (
        <button
          type="button"
          onClick={() => setState('pending')}
          className="mt-6 self-center font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
        >
          Reset demo
        </button>
      )}
    </div>
  )
}