import Link from 'next/link';
import 'swiper/css';
import 'swiper/css/navigation';
import Image from 'next/image';
import {  baseUrl2 } from '../../constants';
import { LoaderProp } from '../../types';



const Posts = (props: any) => {
    const { posts } = props;
    const  Slug  = posts?.id
    const { pageCount } = props;
    const loaderProp = ({ src }: LoaderProp): string => {
        return src;
    };
// console.log("possssst",posts)



   
    return (
        <>
            <div className="mt-5 flex flex-col gap-4 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20 md:flex-row lg:max-w-[1738px]">
                <div className="space-y-4">
                    {posts?.post_list?.map((item: any, index: any) => (
                        <>
                            <div className="max-w-inherit group flex flex-col  gap-[14px] lg:flex-row"  key={index}>
                                <div className="flex-none">
                                    <div className="relative h-[210px] w-full overflow-hidden rounded-[10px] lg:h-[200px] lg:w-[270px]">
                                        <Image
                                            src={`${baseUrl2}${item.image_url}`}
                                            width={700}
                                            height={700}
                                            className="h-full w-full object-cover"
                                            alt={item.post_title}
                                            loader={loaderProp}
                                        />
                                    </div>
                                </div>
                                <div className="flex-1 ">
                                    <Link
                                        href={`/category/${Slug}/${item.nid}`}
                                        className="text-lf font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
                                   
                                   >
                                        <span dangerouslySetInnerHTML={{ __html: item.post_title.length > 80 ? `${item.post_title.slice(0, 80)}...` : item.post_title }} />
                                    </Link>
                                    <div className="mt-2.5  flex items-center gap-2">
                                        <p className="text-[13px] font-semibold">{item?.category_title}</p>
                                        <span>
                                            <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M8 5.83325V8.49992L9.66667 10.1666"
                                                    stroke="#969AA9"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                ></path>
                                                <path
                                                    d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
                                                    stroke="#969AA9"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                ></path>
                                            </svg>
                                        </span>
                                        {/* <p className="text-[13px] font-semibold">{formatDate(item.attributes.createdAt)}</p> */}
                                        <p className="text-[13px] font-semibold">{item.created}</p>
                                    </div>
                                    {/* <p className="mt-2.5  text-sm font-medium" >
                                        {item.body.slice(0, 150)} {item.body.length > 150 ? '...' : ''}
                                    </p> */}

                                    <p
                                    className="mt-2.5 text-sm font-medium"
                                    dangerouslySetInnerHTML={{
                                        __html: item.body.length > 150 ? `${item.body.slice(0, 150)}...` : item.body,
                                    }}
                                    ></p>
                                </div>
                            </div>


                            {index !== posts?.length - 1 && (
                                <div className="border-b border-dashed border-gray opacity-50"></div>
                            )}
                           
                        </>
                    ))}

                 


                    {/* {pageCount > 0 ? (
                       <>
                         <PaginationComponent pageCount={pageCount} />
                  
                       
                       </> 
                         
                        ) : (

                            <div> 

                          </div>

                          )} */}
                </div>
            </div>
        </>
    );
};

export default Posts;