'use client'; import { useState } from 'react'; import { Check, X } from 'lucide-react'; import { cn } from '@/lib/utils'; const KEYFRAMES = ` @keyframes su-pop { 0% { opacity: 0; transform: scale(0.85) } 100% { opacity: 1; transform: none } } @keyframes su-msg-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } `; export type ApprovalDecision = 'approved' | 'rejected'; export interface ApprovalCardProps { title?: string; description?: string; meta?: string; approveLabel?: string; rejectLabel?: string; decision?: ApprovalDecision | null; onDecide?: (decision: ApprovalDecision) => void; className?: string; } export function ApprovalCard({ title = 'Send carrier notice?', description = 'A formal SLA-breach notice to Meridian Lines for the Rotterdam–Felixstowe lane, citing 2.3 days over contracted transit.', meta = 'drafted by agent · draft_carrier_notice', approveLabel = 'Approve & send', rejectLabel = 'Dismiss', decision: decisionProp, onDecide, className, }: ApprovalCardProps) { const [decisionState, setDecisionState] = useState(null); const decision = decisionProp !== undefined ? decisionProp : decisionState; function decide(next: ApprovalDecision) { setDecisionState(next); onDecide?.(next); } return (