import { PromenadeProvider, PromenadeStep, usePromenade } from 'react-promenade';

function Signup() {
  return (
    <PromenadeProvider
      isNextDisabled={(currentStep) => false}
      isBackDisabled={(currentStep) => false}
      onBack={(currentStep, totalNumberOfSteps) => { console.log('back clicked') }}
      onNext={(currentStep, totalNumberOfSteps) => { console.log('next clicked') }}
    >
      <PromenadeStep index={0}><EmailStep /></PromenadeStep>
      <PromenadeStep index={1}><AvatarStep /></PromenadeStep>
      <PromenadeStep index={2}><FollowStep /></PromenadeStep>
    </PromenadeProvider>
  )
}

function EmailStep() {
  const { isNextDisabled, isBackDisabled, goForward, goBackward } = usePromenade()

  return (
    <div>
      <h1>Step 1</h1>
      <button onClick={goForward} disabled={isNextDisabled}>Next</button>
      <button onClick={goBackward} disabled={isBackDisabled}>Back</button>
    </div>
  )
}