import React from 'react';
import SixPostCard from './SixPostCard';
import TwoCardWithImageSectionTwo from './TwoCardWithImageSectionTwo';
import { useTranslation } from 'next-i18next';



const SixPostSection = (props: any) => {
    
    const { SixPosts } = props;
    const SectionName = SixPosts?.category_title;
    
    const { t } = useTranslation('common');
    const sectionTitle = t('sectionTitle'); 
    if (!SixPosts || SixPosts.length === 6) {
        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=" mb-12 dark:bg-none lg:mb-24">
                <div className="mx-auto  bg-black py-12 dark:bg-gray-dark  lg:py-24">
                    <div className="container">
                        <div className="flex flex-col gap-6 lg:flex-row" data-aos="fade-up" data-aos-duration="1000">
                            <div className="flex-1">
                                <div className="mb-5 flex gap-3">
                                    <div className="h-[30px] w-[5px] bg-secondary"></div>
                                    <h5 className="text-2xl font-extrabold text-white">{SectionName}</h5>
                                </div>
                                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                                    {SixPosts?.post_list?.slice(0, 4).map((item:any, idx:any) => (
                                        <div key={idx}>
                                            <SixPostCard Posts={item} />
                                        </div>
                                    ))}
                                </div>
                            </div>

                            <div className="flex-none lg:w-[470px]">
                                <div className="mb-5 flex gap-3">
                                    <div className="h-[30px] w-[5px] bg-primary"></div>
                                    <h5 className="text-2xl font-extrabold text-white">{sectionTitle}</h5>
                                </div>
                                <div className="space-y-6">
                                    {SixPosts?.post_list?.slice(4, 6).map((post:any, index:any) => (
                                        <div key={index}>
                                            <TwoCardWithImageSectionTwo Posts={post} />
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
};

export default SixPostSection;