import Typography from "@/shared/ui/components/Typography/Typography";
import "./AboutUs.scss";
import { Metadata } from "next";
import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
import { apiInstance } from "@/shared/config/apiConfig";
import { IMetatag } from "@/shared/types/metatag-type";
import { useTranslations } from "next-intl";

export async function generateMetadata(): Promise<Metadata> {

  const data = await apiInstance
    .get<IMetatag[]>("/metatags/")
    .then((res) => res.data)
    .catch((e) => console.log(e));

  if (!data)
    return {
      title: "KG ROAD | О нас",
      description:
        "Transparency International - Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.",
      openGraph: {
        title: "KG ROAD | О нас",
        description:
          "Transparency International - Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.",
      },
    };

  const metadata = data.filter((tag) => tag.page === "about-us")[0];
  if (!metadata) {
    return {
      title: "KG ROAD | О нас",
      description:
        "Transparency International - Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.",
      openGraph: {
        title: "KG ROAD | О нас",
        description:
          "Transparency International - Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.",
      },
    };
  }

  return {
    title: `KG ROAD | ${metadata.title}`,
    description: metadata.description,
    keywords: metadata.keywords.split(","),
    openGraph: {
      title: `KG ROAD | ${metadata.title}`,
      description: metadata.description,
      type: "website",
    },
  };
}

const AboutUs = () => {

  const tAboutUs = useTranslations("AboutUs");

  return (
    <div className="about-us page-padding">
      <BreadCrumbs homeRequired />
      <Typography element="h2">О нас</Typography>

      <div className="about-us__descriptions">
        <p>{tAboutUs("p1")}</p>
        <p>{tAboutUs("p2")}</p>
        <p>{tAboutUs("p3")}</p>
      </div>
    </div>
  );
};

export default AboutUs;