import LatestPosts from './LatestPost';
import SkeletonLatestPost from './SkeletonLatestPost';

const LatestPostsListSection = (props: any) => {

    const { latestPostsName } = props;
    const { postsByCategory } = props;
  
    return (
        <>
                 <div>
               
                    <div className="flex gap-4">
                        <div className="h-[30px] w-[5px] bg-primary"></div>
                        {
                            latestPostsName.length === 0 ? 
                                <div className='h-[30px] w-[200px] bg-slate-200 animate-pulse' ></div>
                                :
                                <h5 className="text-2xl font-extrabold text-black dark:text-white">{latestPostsName}</h5>
                                            
                        }

                    </div>

                    <div className="mt-5 space-y-5 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20">
{/* 
                        <LatestPosts posts={postsByCategory}/>
                        <SkeletonLatestPost/> */}



                        {/* {postsByCategory?.post_list?.length === 0 ? (
                           <>
                                   <SkeletonLatestPost />
                                   <SkeletonLatestPost />
                                   <SkeletonLatestPost />
                                   <SkeletonLatestPost />
                                   <SkeletonLatestPost />
                                   </>
                        ) : (
                            <>
                            <LatestPosts posts={postsByCategory} />
                     
                         
                            </>
                        )} */}


                            {!postsByCategory?.post_list || postsByCategory.post_list.length === 0 ? (
                            <>
                                {[...Array(5)].map((_, index) => (
                                <SkeletonLatestPost key={index} />
                                ))}
                            </>
                            ) : (
                            <LatestPosts posts={postsByCategory} />
                            )}

                    </div>
                </div>
        </>
    
     
    );
};

export default LatestPostsListSection;