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

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

import { Header } from "./Header";

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

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

export interface Options {
  title: string;
  pagePath: string;
  image: string;
  link?: ComponentType<LinkProps>;
}

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

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