import { Empty, Spin, Typography } from 'antd';
import type { ErrorLogItem } from '../../errorLogApi';

const { Text } = Typography;

type ErrorPaneProps = {
  items: ErrorLogItem[];
  selectedItem: ErrorLogItem | null;
  isLoading: boolean;
  errorMessage: string;
};

export function ErrorPane({ items, selectedItem, isLoading, errorMessage }: ErrorPaneProps) {
  return (
    <section className="chat-v2__pane chat-v2__pane--errors">
      <div className="chat-v2__pane-header">
        <Text strong>에러 로그</Text>
      </div>

      {isLoading ? (
        <div className="chat-v2__state">
          <Spin />
        </div>
      ) : errorMessage ? (
        <div className="chat-v2__state">
          <Text type="danger">{errorMessage}</Text>
        </div>
      ) : items.length === 0 ? (
        <div className="chat-v2__state">
          <Empty description="에러 로그가 없습니다." />
        </div>
      ) : (
        <div className="chat-v2__error-layout">
          <div className="chat-v2__error-list">
            {items.map((item) => (
              <article key={item.id} className="chat-v2__error-item">
                <Text strong>{item.errorType}</Text>
                <Text type="secondary">{item.errorMessage}</Text>
              </article>
            ))}
          </div>
          <div className="chat-v2__error-detail">
            {selectedItem ? (
              <>
                <Text strong>{selectedItem.errorType}</Text>
                <Text>{selectedItem.errorMessage}</Text>
              </>
            ) : (
              <Empty description="에러를 선택해 주세요." />
            )}
          </div>
        </div>
      )}
    </section>
  );
}
