/**
 * Agent Status Indicator
 *
 * Visual indicator for agent status (idle, working, error, etc.)
 */

'use client';

import { cn } from '@/lib/utils';
import type { AgentStatus } from './types';

const statusConfig: Record<AgentStatus, { color: string; label: string }> = {
  idle: {
    color: 'bg-yellow-500',
    label: 'Idle',
  },
  working: {
    color: 'bg-green-500 animate-pulse',
    label: 'Working',
  },
  waiting: {
    color: 'bg-blue-500',
    label: 'Waiting',
  },
  paused: {
    color: 'bg-gray-400',
    label: 'Paused',
  },
  terminated: {
    color: 'bg-gray-600',
    label: 'Terminated',
  },
};

interface AgentStatusIndicatorProps {
  status: AgentStatus;
  size?: 'sm' | 'md' | 'lg';
  showLabel?: boolean;
  className?: string;
}

export function AgentStatusIndicator({
  status,
  size = 'sm',
  showLabel = false,
  className,
}: AgentStatusIndicatorProps) {
  const config = statusConfig[status] || statusConfig.idle;

  const sizeClasses = {
    sm: 'h-2 w-2',
    md: 'h-3 w-3',
    lg: 'h-4 w-4',
  };

  return (
    <span
      className={cn('inline-flex items-center gap-1.5', className)}
      role="status"
      aria-label={`Status: ${config.label}`}
    >
      <span
        className={cn('inline-block rounded-full', sizeClasses[size], config.color)}
        aria-hidden="true"
      />
      {showLabel && <span className="text-xs text-muted-foreground">{config.label}</span>}
    </span>
  );
}