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

const SixPostCard = (props: any) => {
    const { Posts } = props;



    const loaderProp = ({ src }: LoaderProp): string => {
        return src;
      };
    return (
        <>
            <div className="relative overflow-hidden rounded-[10px]">
                <div className="h-[150px]">
                    <Image
                        src={`${baseUrl2}${Posts?.image_url}`}
                        width={300}
                        height={200}
                        className="h-full w-full object-cover"
                        alt={Posts?.post_title}
                        loader={loaderProp}
                    />
                </div>
                <div className="bg-white p-3">
                    <Link
                        href={`/category/${Posts?.category_id}/${Posts?.nid}`}
                        className="text-xl font-bold text-black duration-200 line-clamp-2 hover:text-secondary dark:hover:text-secondary"
                    >
                          {Posts?.post_title.slice(0, 80)}{' '} {Posts?.post_title.length > 80 ? '...' : ''}
                    </Link>

                    <p className="mt-2 mb-3 text-sm font-medium line-clamp-2" dangerouslySetInnerHTML={{ __html: Posts.body.length > 130 ? `${Posts.body.slice(0, 130)}...` : Posts.body }}>
           
                    </p>
                    <div className="border-b border-[#EFEFEF]"></div>
                    <div className="mt-2 flex justify-between">
                        <div className="flex items-center gap-2.5">
                            {/* <img src="/assets/images/blog/william1.png" alt="" /> */}
                            <p className="c">Admin</p>
                        </div>
                        <div className="flex items-center gap-2.5">
                            <span>
                                <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M8 5.83333V8.49999L9.66667 10.1667"
                                        stroke="#969AA9"
                                        strokeWidth="1.5"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    ></path>
                                    <path
                                        d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
                                        stroke="#969AA9"
                                        strokeWidth="1.5"
                                        strokeLinecap="round"
                                    ></path>
                                </svg>
                            </span>
                            <p className="text-[13px] font-semibold">{Posts?.created}</p>
                        </div>
                    </div>
                    <p className="absolute top-5 rounded bg-secondary px-2.5 py-1 text-[12px] font-extrabold leading-4 text-white ltr:left-5 rtl:right-5">
                        {Posts?.category_title}
                    </p>
                </div>
            </div>
        </>
    );
};

export default SixPostCard;