// src/pages/agent-office/components/EmptyDetailPanel.jsx
import { PLACEHOLDER_IMAGE } from '../constants.js';

export default function EmptyDetailPanel({ variant = 'initial', onClose }) {
  if (variant === 'placeholder') {
    return (
      <div className="ao-sidepanel">
        <div className="ao-sidepanel-header">
          <div className="ao-sidepanel-agent">
            <div className="ao-sidepanel-icon">
              <img src={PLACEHOLDER_IMAGE} alt="준비 중" />
            </div>
            <div className="ao-sidepanel-info">
              <div className="ao-sidepanel-name">준비 중</div>
              <div className="ao-sidepanel-state">● 미고용 슬롯</div>
            </div>
          </div>
          <button className="ao-sidepanel-close" onClick={onClose}>×</button>
        </div>
        <div className="ao-sidepanel-content">
          <p className="ao-empty">
            이 자리는 아직 비어 있어요.<br />
            준비 중인 에이전트입니다.
          </p>
        </div>
      </div>
    );
  }

  // variant === 'initial'
  return (
    <div className="ao-sidepanel ao-sidepanel-initial">
      <div className="ao-sidepanel-content">
        <p className="ao-empty">
          왼쪽 그리드에서<br />
          에이전트를 선택하세요.
        </p>
      </div>
    </div>
  );
}
