---
import ImageMod from "@/components/ImageMod.astro";
import Base from "@/layouts/Base.astro";
import { getListPage } from "@/lib/contentParser.astro";
import { supportedLang } from "@/lib/utils/languageParser";
import { markdownify } from "@/lib/utils/textConverter";
import type { ContentEntryMap } from "astro:content";

export function getStaticPaths() {
  const paths = supportedLang.map((lang) => ({
    params: { lang: lang || undefined },
  }));
  return paths;
}

const { lang } = Astro.params;
const about = await getListPage("about", lang as keyof ContentEntryMap);

const { Content } = await about[0].render();
const { title, description, meta_title, image } = about[0].data;
---

<Base
  title={title}
  meta_title={meta_title}
  description={description}
  image={image}
>
  <section class="section-sm">
    <div class="container">
      <div class="row justify-center">
        <div class="text-center md:col-10 lg:col-7">
          {
            image && (
              <ImageMod
                class="mx-auto mb-6 rounded-lg"
                src={image}
                width={200}
                height={200}
                alt={title}
                format="webp"
              />
            )
          }
          <h2 set:html={markdownify(title)} class="h3 mb-6" />
          <div class="content">
            <Content />
          </div>
        </div>
      </div>
    </div>
  </section>
</Base>