import { TTCMD } from "@/components/ttcmd";
import { ArrowLeftCircleIcon } from "@heroicons/react/24/solid";
import { readFile } from "fs/promises";
import { Suspense } from "react";

export default async function Help({
  params,
}: {
  params: { article: string };
}) {
  if (!params.article.endsWith(".md")) return <></>;
  const body = readFile(
    "./md/help articles/" + decodeURIComponent(params.article),
    "utf-8",
  );
  return (
    <>
      <section className="heading">
        <h2 className="strapline">Help</h2>
        <h1>How to use TTCMD</h1>
      </section>
      <section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
        <div className="col-span-2 card">
          <Suspense>
            <TTCMD body={body} />
          </Suspense>
        </div>
      </section>
    </>
  );
}
