import type { Metadata } from "next";
import Image from "next/image";
import { getTranslations, setRequestLocale } from "next-intl/server";
import PageShell from "@/components/PageShell";
import { buildMetadata } from "@/lib/seo";

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "Meta" });
  return buildMetadata({
    title: t("aboutUsTitle"),
    description: t("aboutUsDescription"),
    path: `/${locale}/aboutus`,
    locale,
  });
}

export default async function AboutUsPage({ params }: Props) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("AboutUsPage");

  return (
    <PageShell title={t("title")}>
      <section className="section about-us-page">
        <div className="container about-us-grid">
          <div className="about-us-media shadow-box">
            <Image
              src="/images/about-us/1.jpg"
              alt={t("imageAlt")}
              width={900}
              height={600}
              priority
              sizes="(max-width: 1024px) 100vw, 55vw"
            />
          </div>
          <div className="about-us-copy">
            <Image
              src="/images/about-us/2.png"
              alt=""
              width={90}
              height={90}
              className="about-us-icon"
            />
            <h2>{t("title")}</h2>
            <Image
              src="/images/infoitems/line.png"
              alt=""
              width={151}
              height={5}
              className="section-line"
            />
            <p>{t("p1")}</p>
            <p>{t("p2")}</p>
            <p>{t("p3")}</p>
          </div>
        </div>
      </section>
    </PageShell>
  );
}