import { HydrationData } from "../../../libs/types/hydration";
import { CurriculumDoc } from "../../../libs/types/curriculum";
import { topic2css, useCurriculumDoc } from "./utils";
import { RenderCurriculumBody } from "./body";
import { CurriculumLayout } from "./layout";

import "./index.scss";

export function CurriculumDefault(props: HydrationData<any, CurriculumDoc>) {
  const doc = useCurriculumDoc(props);
  const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || [];
  return (
    <CurriculumLayout
      doc={doc}
      extraClasses={["curriculum-module", `topic-${topic2css(doc?.topic)}`]}
    >
      <header>
        <h1>
          <span>{coloredTitle}</span> {restTitle.join(" ")}
        </h1>
      </header>
      <RenderCurriculumBody doc={doc} />
    </CurriculumLayout>
  );
}