// LessonRenderer.tsx

import { Suspense } from "react";
import { LESSON_COMPONENT_MAP } from "../FetchLessonPage";
import type { LessonId } from "../FetchLessonPage";

interface Props {
  lessonId: LessonId;
}

export const LessonRenderer = ({ lessonId }: Props) => {
  const LessonComponent = LESSON_COMPONENT_MAP[lessonId];

  if (!LessonComponent) {
    return <p>Lesson not found.</p>;
  }

  return (
    <Suspense fallback={<p>Loading lesson...</p>}>
      <LessonComponent />
    </Suspense>
  );
};