/* 
  This is the blog details component.
  It contains the following components:
  - BlogDetails
*/
import { BlogData } from '@/src/types/api/blog.type'
import { BlogContent } from '@/src/types/StaticContent/blog.content.type'
import { formatDateFromTimestamp } from '@/src/utils/commonFunctions'
import { renderSafeHtml } from '@/src/utils/sanitizeHTML'
import Image from 'next/image'
import React from 'react'
import styles from './BlogDetails.module.scss'
import { CKeditorContent } from '@/src/components/CKeditorContent/CKeditorContent'

const BlogDetails: React.FC<{ blogDetails: BlogData, BLOG_LIST: BlogContent['BLOG_LIST'] }> = ({ blogDetails, BLOG_LIST }) => {
    return (
        <>
            <div className={`${styles.BlogDetailsWrap}`}>
                <div className={`${styles.BlogDetailsBanner}`}>
                    {/* Blog Banner Content */}
                    <div className={`${styles.BlogDetailsBannerContent}`}>
                        {/* <Link className={`${styles.CategoriesLink}`} href="#">Blog Categories</Link> */}
                        <h1 className={`h2`}>{blogDetails?.title}</h1>
                        <ul className={`${styles.TimeandDateWrap}`}>
                            <li><i className={`Icon IconClock`}></i> {blogDetails?.readDuration} {BLOG_LIST.MINUTES_READ}</li>
                            {blogDetails?.createdAt && <li><i className={`Icon IconDate`}></i> {formatDateFromTimestamp(Number(blogDetails?.createdAt))} </li>}
                        </ul>
                    </div>
                    {/* Blog Banner Image */}
                    <div className={`${styles.BlogImgWrap}`}>
                        <Image width={1000} height={500} src={blogDetails?.blogImage?.imageUrl} alt="Blog Image" />
                    </div>
                </div>

                {/* Blog Details Content */}
                <div className={`${styles.BlogDetailsContentWrap} notesForGuest`}>
                    <p>{blogDetails?.shortDescription}</p>
                    {/* {renderSafeHtml(blogDetails?.description)} */}
                    <CKeditorContent htmlContent={blogDetails?.description as string} />
                </div>
            </div>
        </>
    )
}

export default BlogDetails