import { A } from "@solidjs/router";
import { For, createMemo } from "solid-js";
import { getDictionary } from "@ben-to/i18n/dictionary";
import { useAppLocale } from "../app-locale-context";

export type StaticInfoKind = "about" | "terms" | "legal" | "privacy" | "notFound";

type StaticDocContent = Readonly<{
  title: string;
  paragraphs: readonly string[];
}>;

export function StaticInfoPage(props: { kind: StaticInfoKind }) {
  const { locale } = useAppLocale();
  const t = createMemo(() => getDictionary(locale()));

  const doc = createMemo((): StaticDocContent => {
    const d = t();
    switch (props.kind) {
      case "about":
        return { title: d.aboutTitle, paragraphs: d.aboutParagraphs };
      case "terms":
        return { title: d.termsTitle, paragraphs: d.termsParagraphs };
      case "legal":
        return { title: d.legalTitle, paragraphs: d.legalParagraphs };
      case "privacy":
        return { title: d.privacyTitle, paragraphs: d.privacyParagraphs };
      default:
        return { title: d.notFoundTitle, paragraphs: d.notFoundParagraphs };
    }
  });

  return (
    <main class="app-shell static-doc">
      <nav class="static-doc__nav" aria-label={t().backToBuilder}>
        <A href="/" class="static-doc__back">
          {t().backToBuilder}
        </A>
      </nav>
      <article class="static-doc__article">
        <h1 class="static-doc__heading">{doc().title}</h1>
        <For each={[...doc().paragraphs]}>{(paragraph) => <p class="static-doc__p">{paragraph}</p>}</For>
      </article>
    </main>
  );
}
