import { Badge } from '@/components/ui/badge'
import { Loader2 } from 'lucide-react'

interface ToolStatusIndicatorProps {
  toolName?: string
}

const TOOL_NAME_MAP: Record<string, string> = {
  searchCampaigns: '🔍 Đang tìm kiếm chiến dịch...',
  getCampaignDetails: '📋 Đang lấy thông tin chi tiết chiến dịch...',
  createCampaign: '✨ Đang khởi tạo chiến dịch mới...',
  executeWorkflow: '⚡ Đang xử lý quy trình...',
  queryCustomerPoints: '💳 Đang tra cứu điểm thưởng khách hàng...',
}

export function ToolStatusIndicator({ toolName }: ToolStatusIndicatorProps) {
  if (!toolName) return null

  const displayText = TOOL_NAME_MAP[toolName] || `🔍 Đang xử lý: ${toolName}...`

  return (
    <Badge
      variant="outline"
      className="gap-2 text-xs font-normal border-amber-500/30 bg-amber-500/10 text-amber-500 py-1 px-3 w-fit animate-pulse my-0.5 shadow-sm"
    >
      <Loader2 className="w-3.5 h-3.5 animate-spin text-amber-500 shrink-0" />
      <span>{displayText}</span>
    </Badge>
  )
}