import { ConfigProvider } from 'antd';
import React, { useContext } from 'react';
import './index.less';
import classNames from 'classnames';

export default props => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-step');
  return (
    <div
      className={classNames(
        `${prefixCls}-item`,
        {
          active: props.current === props.stepIndex,
        },
        { disactive: props.current < props.stepIndex },
        { small: props.size === 'small' },
        props.status,
      )}
    >
      <div className={classNames(`${prefixCls}-item-container`)}>
        <div className={classNames(`${prefixCls}-item-title`)}>
          {props.title}
        </div>
        {props.description && (
          <div className={classNames(`${prefixCls}-item-description`)}>
            {props.description}
          </div>
        )}
      </div>
    </div>
  );
};