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: 3,
    slidesToScroll: 1,
    infinite: false,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 3,
          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 Smart Procurement Reduces Production Delays & Costs
`
                        : idx === 1
                        ? ` Inventory Management Best Practices for SMEs & Manufacturing Units
`
                        : `How Technology Made Businesses More Efficient`}
                    </div>
                    <Paragraph
                      ellipsis={{ rows: 3 }}
                      style={{ color: "#7A7A7A", marginTop: "8px" }}
                    >
                      {idx === 0
                        ? `Production delays caused by late sourcing, incorrect parts, or unreliable suppliers can significantly impact manufacturing schedules and profitability. Smart procurement focuses on improving how businesses source industrial products by using structured processes, data, and digital platforms to ensure timely availability at the best possible cost.

Smart procurement starts with planned sourcing instead of emergency buying. When procurement teams rely on manual emails, phone calls, or single suppliers, lead times become unpredictable. By adopting RFQ-based sourcing, businesses can compare multiple suppliers at once, evaluate delivery timelines, and choose the most reliable option — reducing dependency and last-minute delays.

Another key advantage of smart procurement is better supplier visibility and performance tracking. When supplier response time, pricing consistency, and on-time delivery are monitored, procurement teams can quickly identify dependable vendors. This reduces rework, avoids frequent follow-ups, and prevents production stoppages caused by poor supplier performance.

Smart procurement also lowers costs by eliminating price variations and rushed purchases. Emergency procurement often results in higher prices and logistics costs. With planned RFQs and centralized product catalogs, organizations can lock in competitive pricing and ensure consistency across branches or plants.

Digital procurement platforms further enhance efficiency by offering real-time order tracking and documentation. Procurement teams gain visibility into order status, delivery schedules, and inbound material planning, helping production teams align operations without surprises.

Platforms like Indispare support smart procurement by enabling RFQ-based buying across industrial categories such as bearings, pumps, valves, tools, and hydraulics. By connecting buyers with verified suppliers, Indispare helps businesses reduce sourcing time, avoid delays, and maintain smooth production flow.

In summary, smart procurement is no longer optional for SMEs and manufacturers. It directly reduces downtime, improves cost control, and ensures operational continuity — all critical factors for business growth in competitive industrial markets.
`
                        : idx === 1
                        ? ` Effective inventory management is essential for SMEs and manufacturing units to maintain uninterrupted production and healthy cash flow. Poor inventory planning often leads to either stock shortages that halt operations or excess inventory that blocks working capital.

One of the most important practices is classifying inventory based on usage and importance. Not all items require the same level of control. Critical and fast-moving components should be monitored closely, while slow-moving items can be stocked at lower levels. This approach helps prioritize resources and reduces unnecessary overstocking.

Reorder planning plays a crucial role in preventing stockouts. By setting clear reorder levels based on consumption and supplier lead times, businesses can ensure materials are replenished before they run out. This minimizes emergency purchases, which often come with higher costs and delayed deliveries.

Another best practice is regular stock monitoring and cycle counting. Instead of waiting for annual physical audits, periodic checks help identify discrepancies early and maintain accurate stock records. This improves planning accuracy and reduces losses caused by miscounts or misplaced inventory.

Strong inventory management also depends on supplier reliability. When suppliers deliver on time and maintain consistent quality, businesses can reduce safety stock and free up capital. Using digital procurement platforms helps maintain supplier consistency and improves coordination between purchasing and inventory teams.

Integrating inventory planning with procurement systems further improves efficiency. When inventory data is aligned with RFQ-based procurement, businesses can plan purchases better, avoid excess stock, and maintain optimal inventory levels.

In conclusion, adopting structured inventory management practices allows SMEs and manufacturers to reduce operational risks, control costs, and improve production reliability. With the right processes and procurement support from platforms like Indispare, businesses can manage inventory smarter and scale confidently.
`
                        : `Technology boosts business efficiency by automating tasks, improving communication, and enabling faster, smarter decisions`}
                    </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;