LessonStageViewer component

[Peleke]

Parent Epic

Part of #199 (EPIC: Lesson Stage System)

Description

Create the main component that displays lesson stages and manages navigation between them.

Component Design

interface LessonStageViewerProps {
  lesson: Lesson
  stages: LessonStage[]
  userProgress: UserStageProgress[]
  onStageComplete: (stageType: StageType, score?: number) => void
}

function LessonStageViewer({ lesson, stages, userProgress, onStageComplete }: LessonStageViewerProps) {
  const [currentStage, setCurrentStage] = useState<StageType>('learn')
  
  return (
    <div className="lesson-stage-viewer">
      <LessonProgressBar stages={stages} progress={userProgress} />
      
      <StageNavigation 
        stages={stages} 
        currentStage={currentStage}
        progress={userProgress}
        onStageSelect={setCurrentStage}
      />
      
      <StageContent 
        stage={stages.find(s => s.type === currentStage)}
        onComplete={(score) => onStageComplete(currentStage, score)}
      />
    </div>
  )
}

Stage Content Rendering

Stage Type	Renders
learn	Markdown content + grammar tables
read	TextRenderPanel (existing)
practice	Exercise components
review	FlashcardsPanel (existing)
assess	Quiz component

Acceptance Criteria

• Component renders all stage types
• Stage navigation works (click to switch)
• Locked stages show lock icon
• Current stage is highlighted
• Completed stages show checkmark
• Mobile-responsive layout

Story Points: 5