import React from 'react';
import AntdSteps from 'antd/es/steps';

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

const { CheckIcon, CloseIcon } = Icons;

const Steps = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('steps');
      const icons = {
        finish: (
          <CheckIcon
            fill="currentColor"
            className={`${prefixCls}-finish-icon`}
          />
        ),
        error: (
          <CloseIcon
            fill="currentColor"
            className={`${prefixCls}-error-icon`}
          />
        ),
      };
      return <AntdSteps icons={icons} {...restProps} prefixCls={prefixCls} />;
    }}
  </ConfigConsumer>
);

Steps.Step = AntdSteps.Step;

export default Steps;