"use client";

import { TTCMD, TTCMDRenderer } from "@/components/ttcmd";
import { FC, use, useCallback, useState } from "react";

export const HelpClient: FC<{ body: Promise<string>; title: string }> = ({
  body: bodyPromise,
  title,
}) => {
  const body = use(bodyPromise);
  const [toc, setToc] = useState<Token[]>();
  const escapeTOC = useCallback((t: Token[]) => {
    setToc(t);
    return true;
  }, []);

  return (
    <>
      <section className="heading">
        <h2 className="strapline">Help</h2>
        <h1>{decodeURIComponent(title)}</h1>
      </section>
      <section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
        <div className="col-span-2">
          <TTCMD
            body={body}
            escapeTOC={escapeTOC}
          />
        </div>
        {toc && (
          <div className="sticky top-8 h-min">
            <TTCMDRenderer tokens={toc} />
          </div>
        )}
      </section>
    </>
  );
};