'use client'

import { OnboardingProvider, useOnboarding } from '@onboardjs/react'

function WelcomeStep() {
    return (
        <div>
            <h1>Welcome</h1>
            <p>Let's get you set up.</p>
        </div>
    )
}

function NameStep() {
    const { updateContext, state } = useOnboarding()

    return (
        <input
            placeholder="Your name"
            value={state.context.flowData.userName || ''}
            onChange={(e) => updateContext({ flowData: { userName: e.target.value } })}
        />
    )
}

const steps = [
    { id: 'welcome', component: WelcomeStep, nextStep: 'name' },
    { id: 'name', component: NameStep, nextStep: null },
]

function OnboardingUI() {
    const { state, next, previous, loading, renderStep } = useOnboarding()

    if (!state?.currentStep) return <p>Loading...</p>
    if (state.isCompleted) return <p>Done</p>

    return (
        <div>
            {renderStep()}
            <button onClick={() => previous()} disabled={!state.canGoPrevious}>
                Back
            </button>
            <button onClick={() => next()} disabled={!state.canGoNext || loading.isAnyLoading}>
                Next
            </button>
        </div>
    )
}

export default function App() {
    return (
        <OnboardingProvider steps={steps} localStoragePersistence={{ key: 'onboarding' }}>
            <OnboardingUI />
        </OnboardingProvider>
    )
}