import { RocketOutlined } from '@ant-design/icons';
import { Agent } from '../../../api';
import ChatPreview from '../../../components/ChatPreview';

interface PreviewPaneProps {
  liveAgent: Agent;
  agentId?: string;
}

export default function PreviewPane({ liveAgent, agentId }: PreviewPaneProps) {
  return (
    <div className="flex-1 h-full agent-editor-pane">
      <div className="agent-editor-pane-body agent-editor-preview-shell">
        <div className="agent-editor-pane-header">
          <div>
            <h3 className="agent-editor-pane-title">预览</h3>
            <p className="agent-editor-pane-subtitle">
              一边调整人设和能力，一边看对话气质是否符合你的预期。
            </p>
          </div>
          <span className="agent-editor-badge">
            <RocketOutlined />
            Live Preview
          </span>
        </div>
        <div className="agent-editor-intro" style={{ marginBottom: 14 }}>
          <div className="agent-editor-intro-title">当前预览角色</div>
          <div className="agent-editor-intro-text">
            {liveAgent?.name || '未命名智能体'} 会基于左侧 Prompt 与中栏设置立即更新。你可以直接在这里检查语气、头像和整体观感。
          </div>
        </div>
        <div className="agent-editor-surface" style={{ flex: 1, overflow: 'hidden' }}>
          <ChatPreview agent={liveAgent} agentId={agentId} />
        </div>
      </div>
    </div>
  );
}
