components/AgentCard.jsx

export default function AgentCard({ name, role, icon: Icon, color, status, progress, isActive }) {
  return (
    <div className={`
      relative overflow-hidden bg-white/5 border border-nexus-border rounded-xl p-4 transition-all duration-300 cursor-pointer
      hover:-translate-y-0.5 hover:bg-white/10 hover:border-white/20
      ${isActive ? 'border-nexus-primary shadow-[0_0_20px_rgba(59,130,246,0.15)]' : ''}
    `}>
      <div className="flex items-center gap-3 mb-3">
        <div 
          className="w-9 h-9 rounded-lg flex items-center justify-center bg-gradient-to-br from-slate-800 to-nexus-deep border border-nexus-border text-sm"
          style={{ color }}
        >
          <Icon size={18} />
        </div>
        <div className="flex-1">
          <h4 className="font-semibold text-sm">{name}</h4>
          <span className="text-xs text-nexus-muted">{role}</span>
        </div>
        <div className={`
          w-2 h-2 rounded-full
          ${status === 'working' ? 'bg-nexus-warning animate-pulse shadow-[0_0_8px_#f59e0b]' : ''}
          ${status === 'done' ? 'bg-nexus-success' : ''}
          ${status === 'idle' ? 'bg-nexus-muted' : ''}
        `}></div>
      </div>
      
      <div className="h-1 bg-white/5 rounded-full overflow-hidden">
        <div 
          className="h-full bg-nexus-primary transition-all duration-500 ease-out"
          style={{ width: `${progress}%` }}
        ></div>
      </div>
    </div>
  );
}