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

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: `Статистика по населенным пунктам Кыргызстана`,
      keywords: ["Бишкек", "Чуй", "Кыргызстан", "Дороги"],
    };

  const metadata = data.filter((tag) => tag.page === "statistics")[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 Statistics = ({
  searchParams,
}: {
  searchParams: { ["поиск-населенного-пункта"]: string };
}) => {
  return (
    <div className="statistics page-padding">
      <BreadCrumbs homeRequired />
      <Typography element="h2">Статистика</Typography>
      <StatisticsTable searchParams={searchParams} />
    </div>
  );
};

export default Statistics;