import { Row, Col, Space, Button } from 'antd'
import './InfoPanel.css'

/**
 * 信息展示面板组件
 * @param {Object} props
 * @param {Object} props.data - 数据源
 * @param {Array} props.fields - 字段配置数组
 * @param {Array} props.actions - 操作按钮配置（可选）
 * @param {Array} props.gutter - Grid间距配置
 */
function InfoPanel({ data, fields = [], actions = [], gutter = [24, 16] }) {
  if (!data) {
    return null
  }

  return (
    <div className="info-panel">
      <Row gutter={gutter}>
        {fields.map((field) => {
          const value = data[field.key]
          const displayValue = field.render ? field.render(value, data) : value

          return (
            <Col key={field.key} span={field.span || 6}>
              <div className="info-panel-item">
                <div className="info-panel-label">{field.label}</div>
                <div className="info-panel-value">{displayValue}</div>
              </div>
            </Col>
          )
        })}
      </Row>

      {/* 可选的操作按钮区 */}
      {actions && actions.length > 0 && (
        <div className="info-panel-actions">
          <Space size="middle">
            {actions.map((action) => (
              <Button
                key={action.key}
                type={action.type || 'default'}
                icon={action.icon}
                disabled={action.disabled}
                danger={action.danger}
                onClick={action.onClick}
              >
                {action.label}
              </Button>
            ))}
          </Space>
        </div>
      )}
    </div>
  )
}

export default InfoPanel