import Posts from './Posts';
import SkeletonPostList from './SkeletonPostList';
import EmptyState from '../EmptyState';



const PostsList = (props: any) => {

    const { posts } = props;
    const { postsListName } = props;
    const { pageCount } =  props;

    if (!posts?.post_list || posts?.post_list?.length === 0) {
        return <EmptyState />; 
    }
   
    return (
        <>

                <div className="lg:max-w-[890px] lg:min-w-[633px]">
                    <div className="flex gap-3">
                        <div className="h-[30px] w-[5px] bg-secondary"></div>
                        


                        {
                            postsListName?.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">
                                {postsListName || 'No Posts'}
                                </h5>
                            )
                        }
                    </div>
                    
                    {posts?.length === 0 ? (
                        <>
                            <div className="skeleton-container">
                            {Array.from({ length: 10 }).map((_, index) => (
                                <SkeletonPostList key={index} />
                            ))}
                            </div>
                          
                      
                        </>
                        ) : (
                        <>
                        
                           {
                             <Posts posts={posts} pageCount={pageCount} /> || 'no data'} 
                                
                       
                        </>
                        )}

                        
                </div>
  
        </>
    
     
    );
};

export default PostsList;