import React from 'react';
import { useSelector } from 'react-redux';
import { IRootState } from '../../../store';
import Head from 'next/head';
import Link from 'next/link';
import { formatDate } from '../../../utils';
import Image from 'next/image';
import { baseUrl, baseUrl2 } from '../../../constants';
import { LoaderProp } from '../../../types';

const PostCardSectionFour = (props: any) => {
    const { Posts } = props;
    const isRtl = useSelector((state: IRootState) => state.themeConfig.direction) === 'rtl' ? true : false;

    const loaderProp = ({ src }: LoaderProp): string => {
        return src;
      };
    return (
        <>
            <div className="group flex gap-[14px]">
                <div className="flex-none">
                    <div className="relative h-[120px] w-[120px] overflow-hidden rounded-[10px]">
                    <Image
                        src={`${baseUrl2}${Posts?.image_url}`} 
                        width={700}
                        height={400}
                        className="h-full w-full rotate-0 object-cover duration-200 group-hover:rotate-2 group-hover:scale-110"
                        alt={Posts?.post_list} 
                        loader={loaderProp}
                        />
                        
                    </div>
                </div>
                <div className="flex-1">
                    <Link
                     href={`/category/${Posts?.category_id}/${Posts?.nid}`}
                      className="text-lf font-bold 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>
                    <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">{formatDate(Posts.attributes.createdAt)}</p> */}
                        <p className="text-[13px] font-semibold">{Posts.created}</p>
                    </div>
                    <p className="mt-2.5 text-sm font-medium"  dangerouslySetInnerHTML={{ __html: Posts.body.length > 70 ? `${Posts.body.slice(0, 70)}...` : Posts.body }}>
             
                    </p>
                </div>
            </div>
           
         
        </>
    );
};

export default PostCardSectionFour;