'use client'

import { Loader2 } from 'lucide-react'
import { useT } from '@open-mercato/shared/lib/i18n/context'
import type { AgentStatus } from '../../types'

interface AgentStatusIndicatorProps {
  status: AgentStatus
}

export function AgentStatusIndicator({ status }: AgentStatusIndicatorProps) {
  const t = useT()

  if (status.type === 'idle') return null

  // Get display text based on status type
  let message: string
  switch (status.type) {
    case 'thinking':
      message = t('ai_assistant.status.thinking')
      break
    case 'responding':
      message = t('ai_assistant.status.responding')
      break
    case 'tool':
      message = status.toolName
      break
    case 'executing':
      message = t('ai_assistant.status.executing')
      break
    default:
      message = t('ai_assistant.status.working')
  }

  return (
    <div className="flex items-center gap-2 py-3 px-3 bg-muted/50 rounded-lg text-muted-foreground text-sm">
      <Loader2 className="h-4 w-4 animate-spin" />
      <span>{message}</span>
    </div>
  )
}