import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
import { readdir } from "fs/promises";
import Link from "next/link";

export default async function HelpHome() {
  const articles = await readdir("./md/help articles");

  return (
    <>
      <section className="heading">
        <h2 className="strapline">Help</h2>
        <h1>Table of Contents</h1>
      </section>
      <section className="my-6">
        <ul className="grid md:grid-cols-5 gap-x-8 gap-y-6">
          {articles.map((a) => (
            <li key={a} className="card flex gap-4 items-center">
              <QuestionMarkCircleIcon className="w-8 h-8" />
              <Link
                className="font-bold text-xl hover:text-primary-300 transition-colors"
                href={"/help/" + encodeURI(a)}
              >
                {a.replace(".md", "")}
                &nbsp;→
              </Link>
            </li>
          ))}
        </ul>
      </section>
    </>
  );
}