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 SkeletonDetailsInfo  = () => {



  
    const isRtl = useSelector((state: IRootState) => state.themeConfig.direction) === 'rtl' ? true : false;
    
    return (
        <>
   
                       
                        <div className="lg:max-w-[990px]">
                            <div className=" animate-pulse flex gap-3">
                                <div className="h-[30px] w-[5px] bg-secondary"></div>
                               
                              
                                <div className='h-[30px] w-[300px] bg-slate-200 animate-pulse' ></div>
                 
                            </div>
                            <div className="mt-5 lg:max-w-[990px] sm:w-full  flex flex-col gap-4 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20 md:flex-row">
                                <div className="flex rounded-[10px]">
                                    <div>
                                        <div className="relative overflow-hidden rounded-[10px] md:max-w-[1160px]">

                                               <div className='h-[350px] lg:w-[580px]  bg-slate-200 animate-pulse ' >

                                               </div>

                                        </div>
                                        <div className="mt-3 mb-4 flex gap-4">
                                  
                                         
                                            <div className=' flex items-center gap-2 h-[15px] w-[10px] bg-slate-200 animate-pulse' ></div>
                                            <div className=' flex items-center gap-2 h-[15px] w-[40px] bg-slate-200 animate-pulse' ></div>
                                            <div className=' flex items-center gap-2 h-[15px] w-[10px] bg-slate-200 animate-pulse' ></div>
                                            <div className=' flex items-center gap-2 h-[15px] w-[60px] bg-slate-200 animate-pulse' ></div>
                                        </div>
                                        <div className="  duration-200 h-[20px] w-[380px] bg-slate-200 animate-pulse" ></div>
                             

                                            <div className="mt-4 text-sm font-medium h-[20px] w-[370px] bg-slate-200 animate-pulse"> </div>
                                            <div className="mt-4 text-sm font-medium h-[20px] w-[376px] bg-slate-200 animate-pulse"> </div>
                                            <div className="mt-4 text-sm font-medium h-[20px] w-[370px] bg-slate-200 animate-pulse"> </div>
                                    </div>
                                </div>
                              
                            </div>
                        </div>


 
        </>
    
     
    );
};

export default SkeletonDetailsInfo;