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

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

   
    const loaderProp = ({ src }: LoaderProp): string => {
        return src;
      };
    return (
        <>
            <div className="relative h-[324px] w-full overflow-hidden rounded-[10px]">
                <div className="absolute inset-0 bg-gradient-to-b from-[#000]/5 via-[#000]/60 to-[#000]/75"></div>

                <Image
                    src={`${baseUrl2}${Posts?.image_url}`}
                    width={700}
                    height={400}
                    className="h-full w-full object-cover"
                    alt={Posts?.post_title}
                    loader={loaderProp}
                />

                <div className="absolute bottom-5 left-5 right-5">
                    <Link
                        href={`/category/${Posts?.category_id}/${Posts?.nid}`}
                        className="text-xl font-bold text-white hover:text-secondary dark:hover:text-secondary"
                    >
                          {Posts?.post_title.slice(0, 80)}{' '} {Posts?.post_title.length > 80 ? '...' : ''}
                    </Link>
                    <p className="mt-2 text-sm font-medium text-white" dangerouslySetInnerHTML={{ __html: Posts.body.length > 130 ? `${Posts.body.slice(0, 130)}...` : Posts.body }}>
                        
                    </p>
                    <div className="mt-3 border-b border-white/40"></div>
                    <div className="mt-3 flex justify-between">
                        <div className="flex items-center gap-2.5">
                            {/* <img src="/assets/images/blog/william2.png" alt="" /> */}
                            <p className="text-sm font-semibold text-white">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.83337V8.50004L9.66667 10.1667"
                                        stroke="white"
                                        strokeWidth="1.5"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    ></path>
                                    <path
                                        d="M4.66668 2.72526C5.64725 2.15802 6.78572 1.83337 8.00001 1.83337C11.6819 1.83337 14.6667 4.81814 14.6667 8.50004C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.50004C1.33334 7.28575 1.65799 6.14728 2.22522 5.16671"
                                        stroke="white"
                                        strokeWidth="1.5"
                                        strokeLinecap="round"
                                    ></path>
                                </svg>
                            </span>
                            <p className="text-sm font-semibold text-white">{Posts?.created}</p>
                        </div>
                    </div>
                </div>
                <p className="absolute top-5 rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white ltr:left-5 rtl:right-5">
                    {Posts?.category_title}
                </p>
            </div>
        </>
    );
};

export default TwoCardWithImageSectionTwo;