AgentCard.tsx

import React from 'react';
import { AgentConfig } from '../types/Agent';

interface AgentCardProps {
  config: AgentConfig;
  status: 'idle' | 'processing' | 'complete';
}

export function AgentCard({ config, status }: AgentCardProps) {
  return (
    <div className="bg-white rounded-lg shadow p-4 mb-4">
      <h3 className="text-lg font-semibold">{config.name}</h3>
      <p className="text-sm text-gray-600 mb-2">{config.goal}</p>
      <div className="flex items-center">
        <span className={`w-2 h-2 rounded-full mr-2 ${
          status === 'idle' ? 'bg-gray-400' :
          status === 'processing' ? 'bg-blue-500' :
          'bg-green-500'
        }`} />
        <span className="text-sm capitalize">{status}</span>
      </div>
    </div>
  );
}