import Image from 'next/image';
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 { baseUrl, baseUrl2 } from '../../../constants';
import { LoaderProp } from '../../../types';


const FifeCardWithImage  = (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 relative lg:h-[545px] flex-1 overflow-hidden rounded-[10px] sm:h-auto">

            <div className="absolute inset-0 z-[1] bg-gradient-to-b from-transparent to-black"></div>
            <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_title} 
             loader={loaderProp}
             />
             
             <h5 className="absolute top-5 rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold text-white ltr:left-5 rtl:right-5">
             { Posts?.category_title }
             </h5>
                                    <div className="absolute bottom-4 left-5 right-5 z-[1] text-white">
                                        <Link
                                           href={`/category/${Posts?.category_id}/${Posts.nid}`}
                                            className="lg:text-xl font-black duration-200 hover:text-secondary dark:hover:text-secondary sm:text-[32px] sm:leading-10"
                                        >

                                        <span dangerouslySetInnerHTML={{ __html: Posts.post_title.length > 80 ? `${Posts.post_title.slice(0, 80)}...` : Posts.post_title }} />
                                            
                                             {/* { Posts?.post_title} */}
                                        </Link>
                                        <p className="my-3 text-sm font-semibold"dangerouslySetInnerHTML={{ __html: Posts.body.length > 130 ? `${Posts.body.slice(0, 130)}...` : Posts.body }}>
                                        
                                        </p>
                                        <div className="border-b border-white/40"></div>
                                        <div className="mt-[14px] 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">
                                                    Admin
                                                {/* { Posts?.attributes?.author?.data?.attributes?.username } */}
                                                </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>
                                                        <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>
                                        </div>
                                    </div>
                                  

                                    
          </div>
               

        </>
    );
};

export default FifeCardWithImage;