import React from 'react';
import AntdDescriptions from 'antd/es/descriptions';

import { ConfigConsumer } from '../config-provider';
import './index.less';

const Descriptions = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('descriptions');
      const customizeProps = {
        column: 1, // 默认一列
        colon: false,
      };
      return (
        <AntdDescriptions
          {...customizeProps}
          {...restProps}
          prefixCls={prefixCls}
        />
      );
    }}
  </ConfigConsumer>
);

const DescriptionsItem = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('descriptions-item');
      const customizeProps = {
        span: 1,
      };
      return (
        <AntdDescriptions.Item
          {...customizeProps}
          {...restProps}
          prefixCls={prefixCls}
        />
      );
    }}
  </ConfigConsumer>
);

Descriptions.Item = DescriptionsItem;

export default Descriptions;