import { Queries } from "@/api/queries";
import PageTitle from "@/components/PageTitle";
import MainNews from "@/components/news/MainNews";
import NewsGrid from "@/components/news/NewsGrid";
import Item from "@/components/news/NewsItem";
import Hydrate from "@/utils/HydrateClient";
import getQueryClient from "@/utils/getQueryClient";
import { dehydrate } from "@tanstack/react-query";

export async function generateStaticParams() {
  const news = await Queries.getNews(1, { perPage: 20 });

  return news.data.map((item) => ({
    slug: item.id.toString(),
  }));
}

interface IParams {
  params: {
    slug: string;
  };
}

const NewsItem = async ({ params }: IParams) => {
  const queryClient = getQueryClient();
  await queryClient.prefetchQuery({
    queryKey: ["news_item", params.slug],
    queryFn: () => Queries.getNewsItem(params.slug),
  });
  await queryClient.prefetchInfiniteQuery({
    queryKey: ["news", "infinite"],
    queryFn: ({ pageParam = 1 }) => Queries.getNews(pageParam, {}),
  });

  const dehydratedState = dehydrate(queryClient);

  return (
    <div className="news-item">
      <div className="container">
        <Hydrate state={{ dehydratedState }}>
          <div className="news-body py-11">
            <Item id={params.slug} />
            <div className="pt-8">
              <NewsGrid isSlides perPage={20} title="Habarlar" />
            </div>
          </div>
        </Hydrate>
      </div>
    </div>
  );
};

export default NewsItem;