import React, { PropTypes } from 'react'

const Stepper = props => (
  <ul className="stepy-header">
    {props.steps.map((step, index) => (
      <li key={step.label} className={step.active && 'stepy-active'}>
        <div>{index + 1}</div>
        {step.label}
      </li>
    ))}
  </ul>
)

Stepper.propTypes = {
  steps: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string.isRequired,
    active: PropTypes.bool.isRequired,
  }))
}

export default Stepper