/**
 * @component Onboarding
 * @description Main component that orchestrates the onboarding flow
 *
 * @see https://www.figma.com/design/cfMOy1RJasIu3QyzAMBFxB/Laconic?node-id=571-3500&m=dev
 */

'use client'

import { ConfigureStep } from '@/components/onboarding/configure-step'
import { ConnectStep } from '@/components/onboarding/connect-step'
import { DeployStep } from '@/components/onboarding/deploy-step'
import { useOnboarding } from '@/components/onboarding/useOnboarding'
import { ScrollArea } from '@workspace/ui/components/scroll-area'
import { SidebarNav } from './sidebar'

/**
 * Main onboarding page component
 * Orchestrates the entire onboarding flow and manages step transitions
 *
 * Component Hierarchy:
 * - OnboardingContainer
 *   - SidebarNav (step progress)
 *   - Main content
 *     - StepHeader (current step info)
 *     - Step content (ConnectStep | ConfigureStep | DeployStep)
 *     - StepNavigation (previous/next controls)
 *
 * @returns {JSX.Element} Complete onboarding interface
 */
export default function Onboarding() {
  const { currentStep } = useOnboarding()

  return (
    // <OnboardingContainer data-oid="yb4gz7q">
    <div className="flex w-full flex-row">
      <SidebarNav currentStep={currentStep} />
      <ScrollArea className="flex-1 mt-6 mb-6 w-full">
        {currentStep === 'connect' && <ConnectStep />}
        {currentStep === 'configure' && <ConfigureStep />}
        {currentStep === 'deploy' && <DeployStep />}
      </ScrollArea>

      {/* <StepNavigation
                  currentStep={currentStep}
                  onPrevious={previousStep}
                  onNext={nextStep}
                  nextLabel={currentStep === "deploy" ? "Deploy" : "Next"}
                  data-oid="jjbfqa3"
                 /> */}
    </div>
    // </OnboardingContainer>
  )
}