// src/pages/agent-office/components/AgentGrid.jsx
import { GRID_SLOTS } from '../constants.js';
import AgentCard from './AgentCard.jsx';
import PlaceholderCard from './PlaceholderCard.jsx';

export default function AgentGrid({ agents, notifications, selectedAgent, onSelectAgent, onSelectPlaceholder }) {
  return (
    <div className="ao-grid">
      {GRID_SLOTS.map((slot, idx) => {
        if (slot.agentId === null) {
          const placeholderKey = `placeholder-${idx}`;
          return (
            <PlaceholderCard
              key={placeholderKey}
              active={selectedAgent === placeholderKey}
              onClick={() => onSelectPlaceholder(placeholderKey)}
            />
          );
        }
        return (
          <AgentCard
            key={slot.agentId}
            agentId={slot.agentId}
            agentState={agents[slot.agentId]}
            notificationCount={notifications[slot.agentId] || 0}
            active={selectedAgent === slot.agentId}
            onClick={() => onSelectAgent(slot.agentId)}
          />
        );
      })}
    </div>
  );
}
