'use client'
import React from 'react';
import 'swiper/css';
import 'swiper/css/navigation';
import { useSelector } from 'react-redux';
import { IRootState } from '../../store';
import Head from 'next/head';

import PostDetails from './PostDetails';
import LatestPostsListSection from '../LatestPost/LatestPostsListSection';
import Breadcrumb from '../Breadcrumb/Breadcrumb';
import SkeletonDetailsInfo from './SkeletonDetailsInfo';
import RelatedPost from '../RelatedPosts/RelatedPost';
import { useTranslation } from 'next-i18next';
import EmptyState from '../EmptyState';

const PostDetailsSection  = (props: any) => {

    const { postDetails } = props;
    const  categorySlug  = postDetails.attributes?.category?.data.id
    const { postImage } =  props;
    const { latestNewsPost } =  props;
    const { t } = useTranslation('common'); // Specify the namespace if you use one
    const LatestPostName = t('latestNews'); 

    
    const isRtl = useSelector((state: IRootState) => state.themeConfig.direction) === 'rtl' ? true : false;
    return (
        <>
       
            <section className="bg-gradient-to-t from-white/60 to-transparent  py-9 dark:bg-none    ">
                    
                <div className="container">
                    <div className="flex lg:items-start flex-col  items-center gap-5 lg:flex-row" data-aos="fade-up" data-aos-duration="1000">
  


                    {postDetails?.length === 0 ? (
                        <>
                         
                          <EmptyState/>
                      
                        </>
                        ) : (
                        <>
                        
                     
                        {
                                postDetails?.nid ?
                                   <PostDetails  postDetails={postDetails}  postImage={postImage} />
                                
                                :
                            <SkeletonDetailsInfo/>

                        
                            }
                       
   
                       
                        </>
                        )}
                         

                        <LatestPostsListSection postsByCategory={latestNewsPost} latestPostsName={LatestPostName} />
                 


  

                   
                    </div>
                     <RelatedPost slug={postDetails?.category_id} /> 
         
                </div>
            </section>

        </>
    );
};

export default PostDetailsSection;