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 FifePostCard  = (props: any) => {

    const { Posts } = props;
   
    const isRtl = useSelector((state: IRootState) => state.themeConfig.direction) === 'rtl' ? true : false;
    const locale = isRtl ? 'ar' : 'en';
    const loaderProp = ({ src }: LoaderProp): string => {
        return src;
      };
      
    
    return (
        <>
                  <div className="group relative h-[263px] w-full overflow-hidden rounded-[10px] lg:max-w-[292px]">
                      <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-secondary py-1 px-2.5 text-[12px] font-extrabold text-white ltr:right-5 rtl:left-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-base font-bold duration-200 hover:text-secondary dark:hover:text-secondary"
                            >
                                <span dangerouslySetInnerHTML={{ __html: Posts.post_title.length > 80 ? `${Posts.post_title.slice(0, 80)}...` : Posts.post_title }} />
                                          {/* { Posts?.post_title} */}
                            </Link>
                            <div className="mt-[14px] flex Postss-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>
               

        </>
    );
};

export default FifePostCard;