import { Step, Steps, StepHeader } from 'fl-react-steps'

// Check client/style.scss for variables you can override
import 'fl-react-steps/client/style.scss'

export default class SteppedForm extends React.Component {
  
  constructor() {
    super()
    this.state = {step: 1}
  }

  handleChangeStep = step => {
    this.setState({step})
  }

  render() {
    const { step } = this.state

    return (
      <div>
        <StepHeader headings={['First page', 'Second page']} step={step} onChangeStep={this.handleChangeStep} />

        <Steps step={step}>

          <Step>
            <form>
              {/* the first page of your form */}
            </form>
          </Step>

          <Step>
            <form>
              {/* the second page of your form, and so on */}
            </form>
          </Step>

        </Steps>
      </div>
    )
  }
}