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

const LatestPosts = (props: any) => {

    const { posts } = props;
    const  CategoryGroupSlug  = posts.category_group_id;

    const loaderProp = ({ src }: LoaderProp): string => {
        return src;
      };
    return (
        <>
              
                 {posts?.post_list?.slice(0, 5).map((item:any, index:any) => (
                       <div>
                        <div className="flex gap-3">
                        <div className="flex-none">
                            <div className="relative h-20 w-20 overflow-hidden rounded-[10px]">
                                
                            <Image
                                    src={`${baseUrl2}${item?.image_url}`} 
                                    width={300}
                                    height={200}
                                    className="h-full w-full object-cover"
                                    alt={item?.post_list}
                                    loader={loaderProp} />

                            </div>
                        </div>
                        <div>

                            
                            <Link
                                href={`/category/${CategoryGroupSlug}/${item.nid}`}
                                className="text-[15px] font-bold leading-5 text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
                            >

                            <span dangerouslySetInnerHTML={{ __html: item.post_title.length > 100 ? `${item.post_title.slice(0, 100)}...` : item.post_title }} />
                                {/* {item?.post_title} */}
                            </Link>
                            <div className="mt-2.5 flex items-center gap-2">
                                <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">{item?.created}</p>
                            </div>
                        </div>
                    </div>

                    
                  

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

                  ))}
           
        </>
    
     
    );
};

export default LatestPosts;