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

export default function({ children, toc, footnotes }) {
  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>
      }
    </>
  );
}