import React from 'react';
import { useAuthStore } from '@/features/auth/store/authStore';
import { useOnboarding } from '@/features/onboarding/hooks/useOnboarding';
import { SetupWizard } from '@/features/onboarding/components/SetupWizard';
import { GuidedTour } from '@/features/onboarding/components/GuidedTour';

interface OnboardingGateProps {
  children: React.ReactNode;
}

export const OnboardingGate: React.FC<OnboardingGateProps> = ({ children }) => {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
  const isLoading = useAuthStore((state) => state.isLoading);
  const { shouldShowWizard, isLoading: onboardingLoading } = useOnboarding();

  if (isLoading || !isAuthenticated) {
    return <>{children}</>;
  }

  return (
    <>
      {children}
      {!onboardingLoading && shouldShowWizard && <SetupWizard />}
      {!onboardingLoading && !shouldShowWizard && <GuidedTour />}
    </>
  );
};