import type { Metadata } from "next";
import { getLocale, getTranslations } from "next-intl/server";

import { Container } from "@/components/layout/container";
import { PageHero } from "@/components/layout/page-hero";
import { AppCard } from "@/components/ui/app-card";
import { getSiteSettings } from "@/lib/app-config";
import { resolveLocale } from "@/lib/locale";
import { buildLocalizedMetadata } from "@/lib/metadata";

type AboutPageProps = {
  params: Promise<{
    locale: string;
  }>;
};

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: AboutPageProps): Promise<Metadata> {
  await params;
  const siteSettings = await getSiteSettings();
  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
  const t = await getTranslations({ locale: localeKey, namespace: "aboutPage" });

  return await buildLocalizedMetadata({
    locale: localeKey,
    pathname: "/about",
    title: t("title"),
    description: t("description"),
  });
}

export default async function AboutPage({ params }: AboutPageProps) {
  await params;
  const siteSettings = await getSiteSettings();
  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
  const t = await getTranslations({ locale: localeKey, namespace: "aboutPage" });

  return (
    <>
      <PageHero
        locale={localeKey}
        badge={t("heroEyebrow")}
        title={t("title")}
        description={t("description")}
      />

      <Container className="pb-16 lg:pb-20">
        <AppCard level={3} padding="lg" className="mx-auto max-w-3xl text-center">
          <p className="text-lg font-medium text-foreground">{t("placeholder")}</p>
        </AppCard>
      </Container>
    </>
  );
}