// 'use client'
// import { useRouter } from 'next/router';
// import { FC, useEffect, useState } from 'react';
// import MagazineApis from '../../../utils/MagazineApis';
// import { Category, PostData, PostItem } from '../../../types';
// import { useSearchParams } from 'next/navigation';
// import PostsListSection from '../../../components/PostsList/PostsListSection';
// import { MagazinePostsState, useMagazinePosts } from '../../../utils/useMagazinePosts';

// const CategoryListPosts:FC = () => {
//   const router = useRouter();
//   const { category } = router.query;
//   const searchParams = useSearchParams()

//   const { locale} = router;
  

//   // const currentPage = Number(searchParams?.get('page')) || 1;
//   // console.log("currentPage",currentPage)


//   const [postsLists, setCategory] = useState<PostItem[]>([]);
//   const [categoryName, setCategoryName] = useState<Category[]>([]);

//   // const [pageCount, setpageCount] = useState<PostData[]>([]);

// const pageCount = 1
//   useEffect(() => {
//     if (category) {
//       getCategoryID(category,locale);
     
//     }
//   }, [category,pageCount,locale]);

//   const getCategoryID = (category: string | string[],locale:any) => {
    
//     MagazineApis.getCategoryID(category,locale).then(
//       res => {
//         console.log("category", res.data)
//         setCategory(res.data[0])
//         setCategoryName(res.data[0].category_title)
       
//       }
//     );
//   };
//   console.log("pageCount",pageCount)

//   // const geLatestNewsPost = (locale:any) => {
//   //   MagazineApis.getNumberOfPostByCategoryName('news',5,locale).then(
//   //     res => {
//   //       console.log("geLatestNewsPost", res.data.data)
//   //       setLatestNewsPost(res.data.data)
//   //     }
//   //   );
//   // };


//   const latestNewsPosts: MagazinePostsState = useMagazinePosts( 11,locale);


//   return (
//    <div>
//     <PostsListSection posts={postsLists} postsListName={categoryName} latestNewsPost={latestNewsPosts.posts[0]} pageCount={pageCount} />
//     </div>
//   );
// };

// export default CategoryListPosts;




import { GetStaticPaths, GetStaticProps } from 'next';
import { FC } from 'react';
import MagazineApis from '../../../utils/MagazineApis';
import { PostItem } from '../../../types';
import PostsListSection from '../../../components/PostsList/PostsListSection';
import { MagazinePostsState, useMagazinePosts } from '../../../utils/useMagazinePosts';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

interface CategoryListPostsProps {
  postsLists: PostItem[];
  categoryName: string;
  locale: string;
}

const CategoryListPosts: FC<CategoryListPostsProps> = ({ postsLists, categoryName, locale }) => {
  // Fetch the latest news posts based on the locale
  const latestNewsPosts: MagazinePostsState = useMagazinePosts(11, locale);

  return (
    <div>
      

      <PostsListSection posts={postsLists} postsListName={categoryName} latestNewsPost={latestNewsPosts.posts[0]} pageCount={1} />
    
    </div>
  );
};

// Static paths configuration
export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [], // No pre-generated paths at build time
    fallback: 'blocking', // Generate pages on-demand
  };
};

// Fetch data for static generation
export const getStaticProps: GetStaticProps = async (context) => {
  const { params, locale } = context;
  const category = params?.category as string;

  // Fetch category data at build time
  const res = await MagazineApis.getCategoryID(category, locale);
  const postsLists = res.data[0] || [];
  const categoryName = res.data[0]?.category_title || 'Unknown Category';

  return {
    props: {
      ...(await serverSideTranslations(context.locale || 'ar', ['common'])),
      postsLists,
      categoryName,
      locale: locale || 'en',
    },
    revalidate: 60, // Revalidate every 60 seconds
  };
};

export default CategoryListPosts;