import Link from 'next/link';
import React from 'react';
import 'swiper/css';
import 'swiper/css/navigation';
import { useSelector } from 'react-redux';
import { IRootState } from '../../store';
import Head from 'next/head';
import { formatDate } from '../../utils';
import Image from 'next/image';
import {  type BlocksContent } from '@strapi/blocks-react-renderer';
import BlockRendererClient from '../BlockRendererClient';

import { baseUrl, baseUrl2 } from '../../constants';
import { LoaderProp } from '../../types';
import EmptyState from '../EmptyState';

const PostDetails  = (props: any) => {

    const { postDetails } = props;
    const { postImage } =  props;
    
  

    const content:BlocksContent = postDetails?.body
  

    const loaderProp = ({ src }: LoaderProp): string => {
        return src;
      };
      if (!postDetails || postDetails.length === 0) {
        return <EmptyState />; 
    }
   
  
    return (
        <>    
                        <div className="lg:max-w-[1605px]   rtl:lg:max-w-[1605px]">
                            <div className="flex gap-3">
                                <div className="h-[30px] w-[5px] bg-secondary"></div>
                                <h5 className="text-2xl font-extrabold bg text-black dark:text-white">{postDetails?.post_title}</h5>
                            </div>
                            <div className="mt-5 lg:max-w-[1605px]  rtl:lg:max-w-[1605px]flex flex-col gap-4 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20 md:flex-row">
                                <div className="flex rounded-[10px]">
                                    <div>
                                        <div className="relative overflow-hidden rounded-[10px] md:max-w-[1160px]">
                                         <Image
                                               src={`${baseUrl2}${postImage}`} 
                                               width={720}
                                               height={720}
                                               alt={postDetails?.post_title}
                                               loader={loaderProp}
                                               /> 

                                            <p className="absolute top-5 left-5 rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white">
                                                {postDetails?.category_title}
                                            </p>
                                        </div>
                                        <div className="mt-3 mb-4 flex gap-4">
                                        <div className="flex items-center gap-2">
                                                <Link href="#">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <circle cx="9" cy="4.5" r="3" stroke="#7780A1" strokeWidth="1.5"></circle>
                                                        <path
                                                            d="M11.25 15.4613C10.5681 15.6464 9.8052 15.75 9 15.75C6.10051 15.75 3.75 14.4069 3.75 12.75C3.75 11.0931 6.10051 9.75 9 9.75C11.8995 9.75 14.25 11.0931 14.25 12.75C14.25 13.009 14.1926 13.2603 14.0846 13.5"
                                                            stroke="#7780A1"
                                                            strokeWidth="1.5"
                                                            strokeLinecap="round"
                                                        ></path>
                                                    </svg>
                                                </Link>
                                                Admin
                                                {/* <p className="text-sm font-semibold">{ postDetails?.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
                                                            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"
                                                        />
                                                    </svg>
                                                </span>
                                                {/* <p className="text-[13px] font-semibold">{formatDate(postDetails?.attributes?.createdAt)}</p> */}
                                                <p className="text-[13px] font-semibold">{postDetails?.created}</p>
                                            </div>
                                        </div>
                                        <h1
                                            className="text-lg font-semibold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
                                        >
                                            {postDetails?.post_title}
                                        </h1>
                                            <p className="mt-4 text-base font-medium" dangerouslySetInnerHTML={{ __html: postDetails.body }}>
                            
                                        {/* <BlockRendererClient content={content} /> */}
                                        </p>
                                    </div>
                                </div>
                              
                            </div>
                        </div>


        </>
    
     
    );
};

export default PostDetails;