'use client';

import { useState } from 'react';
import type { LearnCardData } from '@/lib/types';
import type { Question } from '@/lib/types';
import LearnPhase from './LearnPhase';
import QuizRunner from './QuizRunner';

type Accent = 'mango' | 'leaf' | 'sun';

/**
 * A lesson = learn first, then quiz. Shows the "শেখো" flashcards, then swaps to
 * the quiz once the child taps "চলো কুইজ খেলি".
 */
export default function LessonExperience(props: {
  subjectId: string;
  subjectName: string;
  accent: Accent;
  lessonId: string;
  levelId?: string;
  learnCards: LearnCardData[];
  questions: Question[];
  rewardCoins?: number;
  hasMatchGame: boolean;
  autoRead?: boolean;
  backHref?: string;
}) {
  const [phase, setPhase] = useState<'learn' | 'quiz'>(
    props.learnCards.length > 0 ? 'learn' : 'quiz',
  );

  if (phase === 'learn') {
    return (
      <LearnPhase
        subjectName={props.subjectName}
        accent={props.accent}
        cards={props.learnCards}
        autoRead={props.autoRead}
        backHref={props.backHref}
        onStartQuiz={() => setPhase('quiz')}
      />
    );
  }

  return (
    <QuizRunner
      subjectId={props.subjectId}
      subjectName={props.subjectName}
      accent={props.accent}
      lessonId={props.lessonId}
      levelId={props.levelId}
      questions={props.questions}
      rewardCoins={props.rewardCoins}
      hasMatchGame={props.hasMatchGame}
      autoRead={props.autoRead}
      backHref={props.backHref}
    />
  );
}