/* 
This is the blog post item component.
  It contains the following components:
  - BlogPostItem
*/
import { BlogItem } from '@/redux/types/blogTypes';
import Routes from '@/src/utils/RouteConstants';
import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import styles from "./BlogPost.module.scss";

// Define the props for the BlogPostItem component
interface BlogPostItemProps {
  BlogPostContent: BlogItem;
  isHomePage: boolean;
}

const BlogPostItem: React.FC<BlogPostItemProps> = ({ BlogPostContent, isHomePage }) => {
  return (
    <>
      {/* Post Item Start */}
      <div className={`${styles.PostItem} group w-[100%] relative`}>
        <div className={`${styles.PostContent}`}>
          <span className={`${styles.ReadTime} max-w-[130px] bg-primaryColor text-white fs-14 absolute z-[1] left-0 top-0 rounded-full before:content-[''] before:absolute before:left-[12px] before:top-[50%] before:transform before:-translate-y-1/2 before:w-[8px] before:h-[8px] before:rounded-full before:bg-[#fff]`}>{BlogPostContent.readDuration}  <span className='ml-1 line-clamp-1'> min read</span></span>
          <div className={`${styles.PostImg} overflow-hidden rounded-[20px] mb-[12px] md:mb-[14px]`}>
            {BlogPostContent?.blogImage?.imageUrl && <Image width={500} height={500} className={`transition-transform duration-300 group-hover:scale-102 w-full !h-full object-cover`} src={BlogPostContent?.blogImage?.imageUrl} alt="blog" />}
          </div>
          <h6 className={`!mb-[10px] line-clamp-2 group-hover:text-primaryColor`}>{BlogPostContent?.title}</h6>
          <p className={`!mb-0 fs-14 !text-left line-clamp-[3] text-grey475Color`}>{BlogPostContent?.shortDescription}</p>
        </div>
        {isHomePage ? (
          <Link href={Routes.HOME_BLOG_POST(BlogPostContent?.slug)} className={`absolute z-[1] content-[''] top-0 left-0 w-full h-full`}></Link>
        ) : (
          <Link href={Routes.BLOG_POST(BlogPostContent?.slug)} className={`absolute z-[1] content-[''] top-0 left-0 w-full h-full`}></Link>
        )}
      </div>
      {/* Post Item End */}
    </>
  )
}

export default BlogPostItem;