import { Button, Typography } from "antd";
import { FC, useEffect, useState } from "react";
import {
  capitalizeWords,
  getDiscountPercent,
  getDiscountPercentHome,
} from "../../../constants/commonFunction";
import { CalendarOutlined } from "@ant-design/icons";
import styles from "./insights.module.scss";
import cx from "classnames";
import { useRouter } from "next/router";
import * as CommonApi from "../../../pages/api/common";
import { baseUrl, defaultImg } from "../../../constants/urls";
const { Title, Paragraph } = Typography;
import Link from "next/link";
import { title } from "process";
import Slider from "react-slick";
interface Insight {
  id: number;
  title: string;
  date: string;
  description: string;
  image: string;
}

const insights: Insight[] = [
  {
    id: 1,
    title: "How Technology Made Businesses More Efficient",
    date: "February 28, 2019",
    description:
      "They play a role in making operations more seamless, bridging the gap between authorities, consumers and businesses...",
    image: "images/insight1.svg",
  },
  {
    id: 2,
    title: "How Technology Made Businesses More Efficient",
    date: "February 28, 2019",
    description:
      "They play a role in making operations more seamless, bridging the gap between authorities, consumers and businesses...",
    image: "images/insight2.svg",
  },
  {
    id: 3,
    title: "How Technology Made Businesses More Efficient",
    date: "February 28, 2019",
    description:
      "They play a role in making operations more seamless, bridging the gap between authorities, consumers and businesses...",
    image: "images/insight3.svg",
  },
  {
    id: 4,
    title: "How Technology Made Businesses More Efficient",
    date: "February 28, 2019",
    description:
      "They play a role in making operations more seamless, bridging the gap between authorities, consumers and businesses...",
    image: "images/insight4.svg",
  },
];
const Insights: FC<any> = ({ blogData = [] }) => {
  const router = useRouter();
  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 [category, setCategory] = useState([]);
  useEffect(() => {
    CommonApi.getRequest(`${baseUrl}/api/home/popular-sellers`).then((res) => {
      setCategory(res?.data?.data);
    });
  }, []);

  return (
    <>
      <div className={styles.containerCategory}>
        <div className="container">
          <div className={styles.sectionSubTitle}>
            Industrial Insights & Updates
          </div>
          <div className={styles.home__from_the_blog__list}>
          <Slider {...slickSettings} className={styles.sliderContainer}>
            {/* <div className={styles.cardContainer}> */}
              {blogData.map((product: any, idx: number) => {
                return (
                  <div className={styles.card} key={idx}>
                    <div className={styles.imgContainer}>
                      <img
                        src={`${baseUrl}/storage/${product?.image}`}
                        alt="logo"
                        className={styles.image}
                      />
                    </div>
                    <div
                      style={{
                        marginBottom: "8px",
                        color: "#291C61",
                        alignItems: "center",
                        display: "flex",
                        paddingTop: "20px",
                      }}
                    >
                      <CalendarOutlined style={{ marginRight: 6 }} />
                      {idx === 0
                        ? `December 13, 2022`
                        : idx === 1
                        ? `November 26, 2022`
                        : `November 20, 2022`}
                    </div>
                    <div className={styles.cardTitle}>
                      {idx === 0
                        ? `How Technology Made Businesses More Efficient`
                        : idx === 1
                        ? `Top 5 Tips for Industrial Spare Parts Management`
                        : ""}
                    </div>
                    <Paragraph
                      ellipsis={{ rows: 3 }}
                      style={{ color: "#7A7A7A", marginTop: "8px" }}
                    >
                      {idx === 0
                        ? `Technology boosts business efficiency by automating tasks, improving communication, and enabling faster, smarter decisions`
                        : idx === 1
                        ? `Top 5 Tips for Industrial Spare Parts Management`
                        : ""}
                    </Paragraph>
                    <Link href={`/seller/${product?.url}`}>
                      <a>
                        <Button
                          type="primary"
                          className={cx("mt-4", styles.button)}
                        >
                          Read More
                        </Button>
                      </a>
                    </Link>
                  </div>
                );
              })}
            {/* </div> */}
          </Slider>
          </div>
        </div>
      </div>
    </>
  );
};

export default Insights;