'use client'
/*
  Blog Banner Component
*/
import BlogPostImg from "@/public/images/blog-post-img.svg";
import { RootState } from '@/redux/slices';
import { BlogData } from "@/src/types/api/blog.type";
import { BlogContent } from "@/src/types/StaticContent/blog.content.type";
import { formatDateFromTimestamp } from "@/src/utils/commonFunctions";
import Routes from "@/src/utils/RouteConstants";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { useSelector } from "react-redux";
import styles from "./BlogBanner.module.scss";

// Blog Banner Props
type BlogBannerProps = {
  BlogBannerData: BlogContent['PAGE_BANNER']
};

// Blog Banner Component
const BlogBanner: React.FC<BlogBannerProps> = ({ BlogBannerData }) => {

  const { blogBannerList } = useSelector((state: RootState) => state.blog);

  return (
    <section className={`${styles.BlogBannerWrapper} pt-[30px] lg:pt-[50px] xxl:pt-[65px] pb-[30px] lg:pb-[50px] xxl:pb-[65px]`}>
      <div className={`container`}>
        <div className={`${styles.BannerHeader} flex gap-[20px] md:gap-[40px] pt-[15px] pb-[15px] sm:pt-[25px] sm:pb-[25px] lg:pt-[30px] lg:pb-[30px] items-center justify-between`}>
          <h1 className="!m-0">{BlogBannerData?.TITLE}</h1>
        </div>
        <div className={`${styles.BlogPostsWrap} mt-[30px] md:mt-[40px] lg:mt-[50px] flex flex-col lg:flex-row gap-[20px] md:gap-[30px] lg:gap-[40px] xl:gap-[60px] items-center justify-between`}>
          <div className={`${styles.ImgWrap} max-w-[400px] w-full lg:w-[40%] lg:max-w-[100%]`}>
            <Image className="w-full" src={BlogPostImg} alt="blog" />
          </div>
          <div className={`${styles.BlogPostItemsWrap} w-full lg:w-[60%] md:flex md:gap-6 lg:gap-0 lg:block`}>
            {blogBannerList?.data?.slice(0, 2)?.map((blogItem: BlogData, blogItemKey: number) => {
              return (
                <div className={`${styles.BlogPostItem} relative`} key={blogItemKey}>
                  <span className={`${styles.LinkArrow} rotate-[-45deg] before:content-[''] before:absolute before:left-[50%] before:top-[50%] before:inline-block before:-translate-x-1/2 before:-translate-y-1/2 before:w-[16px] before:h-[16px] before:xxl:w-[16px] before:xxl:h-[16px] before:xxxl:w-[22px] before:xxxl:h-[22px] overflow-hidden rounded-full inline-flex items-center justify-center absolute top-0 right-0 w-[42px] h-[42px] xl:w-[50px] xl:h-[50px] xxl:w-[57px] xxl:h-[57px] xxxl:w-[67px] xxxl:h-[67px]`}></span>
                  <div className={`${styles.BlogPostItemContnet} p-[15px] sm:p-[20px] lg:p-[30px] w-full rounded-[20px] xxl:rounded-[40px]`}>
                    <h3 className="mb-[10px] lg:mb-[15px] max-w-[calc(100%-50px)] xl:max-w-[calc(100%-70px)] line-clamp-2">{blogItem?.title}</h3>
                    <span className={`${styles.ReadTime} fs-14 !font-normal mb-[12px] xl:mb-[16px] rounded-full relative 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-[#ff7e67]`}>{blogItem?.readDuration} {BlogBannerData?.MIN_READ}</span>
                    <p className={`${styles.ShortDescription} mb-0 line-clamp-2 mt-[12px] md:mt-[16px] !font-normal`}>
                      {blogItem?.shortDescription}
                    </p>
                    {blogItem?.createdAt && <p className={`${styles.AuthorName} mb-0 fs-14 mt-[12px] md:mt-[16px]`}>
                      {
                        formatDateFromTimestamp(Number(blogItem?.createdAt))
                      }
                    </p>}
                  </div>
                  <Link href={Routes.BLOG_POST(blogItem?.slug)} className={`absolute z-[1] content-[''] top-0 left-0 w-full h-full`}></Link>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export default BlogBanner;