import React from 'react';
import { useSelector } from 'react-redux';
import { IRootState } from '../../../store';
import Head from 'next/head';
import Link from 'next/link';
import LatestPostsListSection from '../../LatestPost/LatestPostsListSection';
import CardWithImageSectionFour from './CardWithImageSectionFour';
import PostCardSectionFour from './PostCardSectionFour';
import { useTranslation } from 'next-i18next';


const FourPostSection = (props: any) => {
    const { FourPosts } = props;
    const SectionName = FourPosts?.category_title;
    const { latestNewsPost } =  props;
    const { t } = useTranslation('common'); // Specify the namespace if you use one
// console.log('FourPostssssssss',FourPosts)
  const LatestPostName = t('latestPostName');
  if (!FourPosts || FourPosts.length === 0) {
    return (
        <div className="empty-state my-6 flex flex-col items-center justify-center">
        <h2  className="text-xl font-bold">No Posts Available</h2>
        <p className="text-gray-500">It seems there are no posts to display right now. Please check back later.</p>
    </div>
    )
}
   
    return (
        <>
            <section className="bg-gradient-to-t from-white/60 to-transparent  py-12 dark:bg-none lg:py-24   ">
                <div className="container">
                    <div className="flex lg:max-w-[1200px]  lg:items-start flex-col items-center gap-5 lg:flex-row" data-aos="fade-up" data-aos-duration="1000">

                        <div className="lg:max-w-[890px] ">
                            <div className="flex gap-3">
                                <div className="h-[30px] w-[5px] bg-secondary"></div>
                                <h5 className="text-2xl font-extrabold text-black dark:text-white">
                                     {SectionName}
                                </h5>
                            </div>
                            <div className="mt-5  flex flex-col gap-4 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20 md:flex-row">
                              

                                    {FourPosts?.post_list?.length > 0 && (
                                    <div key={0}>
                                        <CardWithImageSectionFour Posts={FourPosts.post_list[0]} />  
                                    </div>
                                )}
                                <div className="space-y-4">
                                    {FourPosts?.post_list?.slice(1,4).map((item:any, idx:any) => (
                                        <div key={idx + 1}>
                                             <PostCardSectionFour Posts={item} />
                                            {idx  !== item?.length - 1 && (
                                                <div className="border-b border-dashed border-gray opacity-50"></div>
                                            )}
                                        </div>
                                        
                                    ))}
                                </div>

                            </div>
                        </div>

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

                    </div>
                </div>
            </section>

   
        </>
    );
};

export default FourPostSection;