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

const CardWithImageSectionFour = (props: any) => {
    const { Posts } = props;
  
    const loaderProp = ({ src }: LoaderProp): string => {
        return src;
      };
    return (
        <>
            <div className="flex lg:max-w-[808px] rounded-[10px]">
                <div>
                    <div className="relative overflow-hidden rounded-[10px] lg:max-w-[260px] md:max-w-[360px]">
                    <Image
                        src={`${baseUrl2}${Posts?.image_url}`} 
                        width={700}
                        height={400}
                        className=""
                        alt={Posts?.post_title}
                        loader={loaderProp}
                        />
                        <p className="absolute top-5 left-5 rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white">
                        { Posts?.category_title }
                         </p>
                    </div>
                    <div className="mt-3 mb-4 flex gap-4">
                        <div className="flex items-center gap-3">
                            {/* <img src="/assets/images/blog/shaun.png" className="w-9" alt="" /> */}
                            {/* <p className="text-[13px] font-semibold">{ Posts?.attributes?.author?.data?.attributes?.username }</p> */}
                            <p className="text-[13px] font-semibold">Admin</p>
                        </div>
                        <div className="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
                                        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"
                                    />
                                </svg>
                            </span>
                            {/* <p className="text-[13px] font-semibold">{formatDate(Posts?.attributes?.createdAt)}</p> */}
                            <p className="text-[13px] font-semibold">{Posts?.created}</p>
                        </div>
                    </div>
                    <Link 
                      href={`/category/${Posts?.category_id}/${Posts.nid}`} 
                      className="text-lg font-semibold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary">
                     {Posts?.post_title.slice(0, 80)}{' '} {Posts?.post_title.length > 80 ? '...' : ''}
                    </Link>
           
                    <p className="mt-4 text-sm font-medium" dangerouslySetInnerHTML={{ __html: Posts.body.length > 130 ? `${Posts.body.slice(0, 130)}...` : Posts.body }}>
                     
                    </p>
                </div>
            </div>
        </>
    );
};

export default CardWithImageSectionFour;