import React from 'react';
import { Button, Result, Typography } from 'antd';

export interface QueryErrorStateProps {
  /** 错误标题，默认「数据加载失败」 */
  title?: string;
  /** 错误描述，默认「请检查网络后重试」 */
  description?: string;
  /** 点击重试回调；不传则不显示重试按钮 */
  onRetry?: () => void;
  /** 紧凑模式：用于表格内部、弹窗等空间受限场景 */
  compact?: boolean;
}

/**
 * 统一查询错误态：任何数据加载失败都应渲染本组件（而非伪装成空状态），
 * 并提供重试入口，让用户明确知道「加载失败」而非「没有数据」。
 */
export const QueryErrorState: React.FC<QueryErrorStateProps> = ({
  title = '数据加载失败',
  description = '请检查网络后重试。',
  onRetry,
  compact = false,
}) => {
  if (compact) {
    return (
      <div style={{ padding: '32px 16px', textAlign: 'center' }}>
        <Typography.Text type="secondary">{title}</Typography.Text>
        {description ? (
          <div>
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
              {description}
            </Typography.Text>
          </div>
        ) : null}
        {onRetry ? (
          <div style={{ marginTop: 12 }}>
            <Button size="small" onClick={onRetry}>
              重试
            </Button>
          </div>
        ) : null}
      </div>
    );
  }
  return (
    <Result
      status="warning"
      title={title}
      subTitle={description}
      extra={onRetry ? <Button type="primary" onClick={onRetry}>重试</Button> : undefined}
    />
  );
};

export default QueryErrorState;
