import Link from "next/link";
import React from "react";
import CardNormal from "src/components/Cards/CardNormal/page";
import ProductCarousel from "src/components/Carousel/ProductCarousel";

const Products = ({ products }) => {

  console.log(products)
  return (
    <div className="my-[120px]">
      <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
        <div className="text-left relative mb-10">
          <h2 className="text-[30px] font-bold relative z-10 xs:text-center lg:text-left">
           
          </h2>
          <p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">

          </p>
        </div>


        <div>
          <ProductCarousel products={products.filter(p => p.brand.title === "active")} subtitle={""} title={"Active Products"} />
        </div>

        <div>
          <ProductCarousel products={products.filter(p => p.brand.title === "savin")} subtitle={""} title={"Savin Products"} />
        </div>

        {/* <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
          {products?.map((product, index) => (
            <div key={index} className="relative">
              <CardNormal product={product} priority />
            </div>
          ))}
        </div> */}

        {/* <div className="flex justify-center">
          <Link href={"categories/Product-20Listing-Page"}>
            <button className="btn btn-primary px-10 text-sm ">
              {" "}
              See All Products
            </button>
          </Link>
        </div> */}
      </div>
    </div>
  );
};

export default Products;