import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
import React from "react";

import { createLink, OrganizedContent } from "@/components/OrganizedContent";

import { Header } from "./Header";
import { Options } from "./ReadAll";

interface Section {
  id: string;
  title: string;
}

export interface Props {
  content: MDXRemoteSerializeResult;
  sections: Section[];
  current: number;
}

export function createSectionPage({
  title,
  image,
  pagePath,
  link,
  description,
  imagePosition,
}: Options) {
  const Link = link ?? createLink(pagePath);

  return function Page(this: void, { content, sections, current }: Props) {
    return (
      <Header
        title={title}
        image={image}
        description={description}
        imagePosition={imagePosition}
      >
        <OrganizedContent
          sections={sections}
          id={sections[current].id}
          pageTitle={title}
          link={Link}
        >
          <MDXRemote {...content} />
        </OrganizedContent>
      </Header>
    );
  };
}