'use client'

import { CreditCard, AlertCircle } from 'lucide-react'
import { Badge } from '@/components/ui/Badge'
import { EmptyState } from '@/components/ui/EmptyState'
import { formatRelativeTime } from '@/lib/types'
import { AgentAction } from '@/lib/api/agent'

interface ApprovalStatusProps {
  actions: AgentAction[]
}

export function ApprovalStatus({ actions }: ApprovalStatusProps) {
  const approvalAction = actions.find(a => a.tool_name === 'request_approval')
  
  if (approvalAction) {
    const status = approvalAction.output_data?.approval?.status || 'pending'
    return (
      <div className="space-y-3">
        <div className="flex items-center gap-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
          <div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg">
            <CreditCard className="h-5 w-5 text-amber-600" />
          </div>
          <div className="flex-1">
            <p className="font-medium text-amber-900 dark:text-amber-100">Purchase Approval</p>
            <p className="text-sm text-amber-700 dark:text-amber-300">
              Status: <span className="font-medium capitalize">{status}</span>
            </p>
          </div>
          <Badge variant={
            status === 'approved' ? 'success' :
            status === 'rejected' ? 'danger' : 'warning'
          }>
            {status}
          </Badge>
        </div>
      </div>
    )
  }
  
  return (
    <EmptyState 
      icon={AlertCircle} 
      title="No approvals" 
      description="Approvals appear when shortages are detected" 
    />
  )
}