import Link from 'next/link';
import React from 'react';
import 'swiper/css';
import 'swiper/css/navigation';
import { useSelector } from 'react-redux';
import { IRootState } from '../../store';

const SkeletonPostList  = () => {
 


  
    const isRtl = useSelector((state: IRootState) => state.themeConfig.direction) === 'rtl' ? true : false;
    
    return (
        <>
   
                       
   <div className="mt-5 flex flex-col gap-4 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20 md:flex-row lg:max-w-[890px]">
                <div className="space-y-4">

                            <div className="max-w-inherit group flex flex-col  gap-[14px] lg:flex-row" >
                                <div className="flex-none">
                                    <div className="relative h-[210px] w-full overflow-hidden rounded-[10px] lg:h-full lg:w-[270px]">
                                        
                                    <div className='h-[210px] w-[270px] bg-slate-200 animate-pulse' ></div>
                                     
                                    </div>
                                </div>
                                <div className="flex-1 ">

                                <div className='flex m-3 items-center  h-[17px] w-[290px] bg-slate-200 animate-pulse gap-5' ></div>
                                <div className='mx-3    text-sm font-medium h-[17px] w-[230px] bg-slate-200 animate-pulse gap-5' ></div>

                                    <div className="mt-2.5  flex items-center ">
                                    <div className="mx-3 h-[16px] w-[60px] bg-slate-200 animate-pulse"></div>
                                    <div className="  h-[16px] w-[18px] bg-slate-200 animate-pulse"></div>
                                    <div className='mx-3  h-[16px] w-[80px] bg-slate-200 animate-pulse' ></div>


                                      
                                    </div>
                                    <div className='m-3  '>

                                        <div className=' h-[16px] w-[270px] bg-slate-200 animate-pulse' ></div>
                                        <div className='my-3  h-[16px] w-[230px] bg-slate-200 animate-pulse' ></div>
                                        <div className='  h-[16px] w-[155px] bg-slate-200 animate-pulse' ></div>
                                    </div>
                                </div>
                            </div>
 
                </div>
            </div>


 
        </>
    
     
    );
};

export default SkeletonPostList;