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;