import React from "react";
import "./newProductsSlider.module.css";
import Image from "next/image";
import ProductCard from "../ProductCard/ProductCard";
import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";

export default function NewProducts({ products }: { products: Array<any> }) {

  const [ref] = useKeenSlider<HTMLDivElement>({
    // loop: true,
    // mode: "free",
    range: {
      // align: false,
    },
    
    slides: {
      perView: 5,
      spacing: 20,
      origin: .14
    },
  });
  return (
    <section className="products-section main-container">
      <div className="boxed-content">
        <h2 className="title">New Delights</h2>
        <hr />
      </div>
      <div  className="products-slider-wrapper ">
        <div ref={ref} className="products-slider keen-slider">
          {products.map((product) => (
            <ProductCard  key={product.sn} product={product} />
          ))}
          
          
        </div>
      </div>
    </section>
  );
}