import Link from 'next/link';

import 'swiper/css';
import 'swiper/css/navigation';
import PostsList from '../PostsList/PostsList';

import MagazineApis from '../../utils/MagazineApis';
import { useEffect, useState } from 'react';
import { PostItem, Posts } from '../../types';
import { useRouter } from 'next/router';
import { MagazinePostsState, useMagazineLatestPosts } from '../../utils/useMagazineLatestPosts';
import { useMagazinePosts } from '../../utils/useMagazinePosts';
import { useTranslation } from 'next-i18next';




const RelatedPost = (props: any) => {

    const { slug } = props;

    const router = useRouter();

    const { locale} = router;
    const  RelatedPostTitle  =  ' مواضيع ذات صلة :'

  
    const { t } = useTranslation() 

    const [relatedPost, setRelatedPost] = useState<Posts[]>([]);

  
  
    useEffect(() => {
     
        getRelatedPost(slug,locale);
       

    }, [slug,locale]);
  
    const getRelatedPost = (relatedPost: any ,locale:any) => {
      
      MagazineApis.getRelatedPosts(relatedPost,locale).then(
        res => {
          console.log("getRelatedPost", res.data[0])
          setRelatedPost(res.data[0])
        
         
        }
      );
    };
 
    // const RelatedPosts: MagazinePostsState = useMagazinePosts(3,locale);

    // console.log('releated post ', RelatedPosts.posts)
    
    return (
        <>
<div className='py-12  lg:max-w-[630px]'>
{/* 
            {RelatedPosts.isLoading ? (
                    <div>Loading global news...</div>
                ) : RelatedPosts.error ? (
                    <div>Error fetching posts: {RelatedPosts.error.message}</div>
                ) : (

                    <PostsList posts={RelatedPosts.posts} postsListName={RelatedPostTitle}  />
                  
            )} */}
              <PostsList posts={relatedPost} postsListName={RelatedPostTitle}  />
</div>


                       

        </>

    );
};

export default RelatedPost;