import { OnboardingProvider } from '@amisi/onboarding';

const onboardingConfig = {
  steps: [
    { id: 'welcome', title: 'Welcome' },
    { id: 'profile', title: 'Create Profile' },
    { id: 'done', title: 'Finish' },
  ],
};

export function AppRoot() {
  return (
    <OnboardingProvider config={onboardingConfig}>
      <YourApp />
    </OnboardingProvider>
  );
}

import { useOnboarding } from '@amisi/onboarding';

export function OnboardingScreen() {
  const {
    loading,
    state,
    currentStep,
    totalSteps,
    nextStep,
    previousStep,
    completeStep,
    completeOnboarding,
    resetOnboarding,
  } = useOnboarding();

  if (loading) return null;

  const step = state.steps[currentStep];

  return null;
}

import { useIsOnboardingComplete } from '@amisi/onboarding';

const isComplete = useIsOnboardingComplete();

import { useOnboardingProgress } from '@amisi/onboarding';

const { current, total, percentage } = useOnboardingProgress();

import { OnboardingGate } from '@amisi/navigation';
import { useIsOnboardingComplete } from '@amisi/onboarding';

export function AppLayout() {
  const hasCompletedOnboarding = useIsOnboardingComplete();

  return (
    <OnboardingGate
      hasCompletedOnboarding={hasCompletedOnboarding}
      redirectTo="/onboarding"
    >
      <YourApp />
    </OnboardingGate>
  );
}