import cx from "classnames";
import styles from "./fromTheBlog.module.scss";
import Slider from "react-slick";
import { FC } from "react";
import { baseUrl } from "../../../constants/urls";
import router from "next/router";

const FromTheBlog: FC<any> = ({ blogData = [] }) => {
  const slickSettings = {
    dots: false,
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 1,
    infinite: false,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 2,
          dots: false,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          infinite: true,
          dots: true,
        },
      },
    ],
  };

  const handleClick = (urlTitle: string, blog: any) => {
    console.log("blog.urlTitle",blog.urlTitle); // Add this line
    router.push({
      pathname: `/blog/${urlTitle}`,
      query: {
        name: blog.image,
      },
    },`/blog/${urlTitle}`);
  };
  

  const updatedBlogData = blogData.map((blogItem: any, index: number,) => {
    // Define urlTitle based on index or any other logic you have
    let urlTitle = "";
    if (index === 0) {
      urlTitle = "Top-5-Things-to-consider-before-buying-Industrial-Spare-Parts-Online";
    } else if (index === 1) {
      urlTitle = "Top-5-Tips-for-Industrial-Spare-Parts-Management";
    }
  
    // Add urlTitle to the blogItem
    return { ...blogItem, urlTitle };
  });

  // console.log("updatedBlogData",updatedBlogData);
  
  return (
    <>
      <div className={styles.blogContainer}>
        <div className={cx("container py-10")}>
          <h2 className={cx("sectionSubTitle mb-8")}>Industrial Insights & Updates</h2>
          <div className={styles.home__from_the_blog__list}>
            <Slider {...slickSettings} className={styles.sliderContainer}>
            {updatedBlogData.map((blog: any, idx: number) => (
                <a
                  key={idx}
                  className={styles.home__from_the_blog__item}
                  onClick={() => {
                    handleClick(blog.urlTitle, blog);
                  }}
                >
                  <img
                    className={styles.home__from_the_blog__item_image}
                    src={`${baseUrl}/storage/${blog.image}`}
                    alt={`${idx}-${blog.image}`}
                  />
                  <span
                    className={styles.home__from_the_blog__item_title}
                    dangerouslySetInnerHTML={{
                      __html:
                        idx === 0
                          ? `Top 5 Things to consider before buying Industrial Spare Parts Online`
                          : idx === 1
                          ? `Top 5 Tips for Industrial Spare Parts Management`
                          : "",
                    }}
                  />
                  <span
                    className={styles.home__from_the_blog__display_date}
                    dangerouslySetInnerHTML={{
                      __html:
                        idx === 0
                          ? `December 13, 2022`
                          : idx === 1
                          ? `November 26, 2022`
                          : `November 20, 2022`,
                    }}
                  />
                </a>
              ))}
            </Slider>
          </div>
        </div>
      </div>
    </>
  );
};

export default FromTheBlog;