export const layout = "./base.tsx";

interface Data {
  toc: {
    text: string;
    slug: string;
    children: {
      text: string;
      slug: string;
    }[];
  }[];
  footnotes: {
    refId: string;
    content: string;
    id: string;
  }[];
}

export default function ({ children, toc, footnotes }: Data & Lume.Data) {
  return (
    <>
      {toc.length > 0 &&
        (
          <nav className="toc">
            <h2>Table of Contents</h2>
            <ol>
              {toc.map((item, index) => (
                <li key={index}>
                  <a href={`#${item.slug}`}>{item.text}</a>
                  {item.children.length > 0 &&
                    (
                      <ul>
                        {item.children.map((child, i) => (
                          <li key={i}>
                            <a href={`#${child.slug}`}>{child.text}</a>
                          </li>
                        ))}
                      </ul>
                    )}
                </li>
              ))}
            </ol>
          </nav>
        )}
      <article>
        {children}
      </article>
      {footnotes.length > 0 &&
        (
          <ol className="footnotes">
            {footnotes.map((note) => (
              <li id={note.id}>
                <span
                  dangerouslySetInnerHTML={{ __html: note.content }}
                  className="footnote-content"
                />
                <a href={`#${note.refId}`} className="footnote-backref">
                  &#x21A9;
                </a>
              </li>
            ))}
          </ol>
        )}
    </>
  );
}