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

function Signup() {
  return (
    <PromenadeProvider
      stepCount={3}
      isBackDisabled={(index) => { return index === 0 }}
      isNextDisabled={(index) => { return false }}
      onBack={(index) => { console.log('back clicked on step', index) }}
      onNext={(index) => { console.log('next clicked on step', index) }}
    >
      <PromenadeStep index={0}><EmailStep /></PromenadeStep>
      <PromenadeStep index={1}><AvatarStep /></PromenadeStep>
      <PromenadeStep index={2}><AboutMeStep /></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>
  )
}