text: import React from 'react';
  import PropTypes from 'prop-types';
  import styles from './WizardNav.css';
  import Icon from './Icon';
  
  const WizardNav = (props) => {
    const {goToStep = () => {}, currentStep, items, icon} = props;
    return (
      <nav className={styles.WizardNav}>
        <ul>
          {
            items.map((item, i) => (
              <li
                key={i}
                className={`${currentStep === item.step ? styles.active : ''} ${item.step < currentStep ? styles.done : ''}`}
                onClick={() => goToStep(item.step)}>
                {item.text}
                {icon && <Icon name={icon} />}
                <span/>
              </li>
            ))
          }
        </ul>
      </nav>
    );
  };
  
  WizardNav.propTypes = {
    currentStep: PropTypes.number.isRequired
  };
  
  export default WizardNav;
  