import React from 'react';
import { useSelector } from 'react-redux';
import { IRootState } from '../../../store';
import Head from 'next/head';
import Link from 'next/link';
import FifePostCard from './FifePostCard';
import FifeCardWithImage from './FifeCardWithImage';


const FifePostSection  = (props: any) => {

    const { fifePosts } = props;
    const  SectionName  = fifePosts?.category_title ;
    
    if (!fifePosts || fifePosts.length === 0) {
        return (
            <div className="empty-state my-6 mt-48 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="py-12 pt-28 pb-8 lg:pt-36">
                <div className="container">
                    <div className="flex items-center 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 grid grid-cols-1 gap-5 lg:grid-cols-2" data-aos="fade-up" data-aos-duration="1000">
                   
                            {fifePosts?.post_list?.length > 0 && (
                                <div key={0}>
                                    <FifeCardWithImage Posts={fifePosts.post_list[0]} />   
                                </div>
                            )}
                            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
                                {fifePosts?.post_list?.slice(1,5).map((item:any, idx:any) => (
                                <div key={idx + 1}>
                                    <FifePostCard Posts={item} />
                                </div>
                                ))}
                             </div>
                       
                    </div>
                </div>
            </section>

        </>
    );
};

export default FifePostSection;