import Typography from "@/shared/ui/components/Typography/Typography";
import "./Volunteers.scss";
import VolunteersTable from "@/widgets/tables/VolunteersTable/VolunteersTable";
import { Metadata } from "next";
import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
import { apiInstance } from "@/shared/config/apiConfig";
import { IMetatag } from "@/shared/types/metatag-type";

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:
        "Страница лучших волонтеров Кыргызской Республики!",
    };

  const metadata = data.filter((tag) => tag.page === "volunteers")[0];
  if (!metadata) {
    return {
      title: "KG ROAD | Волонтеры",
      description:
        "Страница лучших волонтеров Кыргызской Республики!",
    };
  }

  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 Volunteers = () => {
  return (
    <div className="volunteers page-padding">
      <BreadCrumbs homeRequired />

      <Typography element="h2">Волонтеры</Typography>
      <VolunteersTable />
    </div>
  );
};

export default Volunteers;