// src/pages/agent-office/components/AgentCard.jsx
import { AGENT_META, STATE_COLORS, DEFAULT_STATE_COLOR } from '../constants.js';

export default function AgentCard({ agentId, agentState, notificationCount = 0, active = false, onClick }) {
  const meta = AGENT_META[agentId];
  if (!meta) return null;

  const state = agentState?.state || 'idle';
  const stateInfo = STATE_COLORS[state] || DEFAULT_STATE_COLOR;
  const dotClass = `ao-card-dot ${state}${stateInfo.pulse ? ' pulse' : ''}`;
  const badgeText = notificationCount > 9 ? '9+' : String(notificationCount);

  return (
    <button
      type="button"
      className={`ao-card${active ? ' active' : ''}`}
      onClick={onClick}
      style={{ '--card-accent': meta.color }}
    >
      <span className={dotClass} title={state} />
      {notificationCount > 0 && (
        <span className="ao-card-badge">{badgeText}</span>
      )}
      <div className="ao-card-image">
        <img src={meta.image} alt={meta.displayName} />
      </div>
      <div className="ao-card-name">{meta.displayName}</div>
    </button>
  );
}