import Link from "next/link";
import type { Locale } from "@/content/site";
import { Breadcrumbs } from "./Breadcrumbs";

export type ApprovedArticleSection = {
  id: string;
  title: string;
  paragraphs: string[];
};

export type ApprovedArticle = {
  title: string;
  summary: string;
  type: string;
  author: string;
  publishedAt: string;
  readingTime: string;
  sections: ApprovedArticleSection[];
};

const labels = {
  fr: {
    contents: "Sommaire",
    back: "Knowledge",
  },
  en: {
    contents: "Contents",
    back: "Knowledge",
  },
  ar: {
    contents: "المحتويات",
    back: "المعرفة",
  },
} satisfies Record<Locale, { contents: string; back: string }>;

/**
 * Publication-ready visual template. It is intentionally not mounted to a
 * route until an article has completed editorial approval.
 */
export function ArticleTemplate({
  locale,
  article,
}: {
  locale: Locale;
  article: ApprovedArticle;
}) {
  return (
    <main id="main">
      <header className="article-header shell">
        <Breadcrumbs locale={locale} current={article.title} />
        <p className="kicker">{article.type}</p>
        <h1>{article.title}</h1>
        <p className="hero-intro">{article.summary}</p>
        <div className="article-meta">
          <span>{article.author}</span>
          <time>{article.publishedAt}</time>
          <span>{article.readingTime}</span>
        </div>
      </header>
      <div className="article-layout shell">
        <aside className="toc">
          <strong>{labels[locale].contents}</strong>
          {article.sections.map((section) => (
            <a key={section.id} href={`#${section.id}`}>
              {section.title}
            </a>
          ))}
        </aside>
        <article className="article-body">
          {article.sections.map((section) => (
            <section id={section.id} key={section.id}>
              <h2>{section.title}</h2>
              {section.paragraphs.map((paragraph) => (
                <p key={paragraph}>{paragraph}</p>
              ))}
            </section>
          ))}
          <Link className="text-link" href={`/${locale}/knowledge/`}>
            {labels[locale].back}
          </Link>
        </article>
      </div>
    </main>
  );
}