import { getLocale, getMessages } from "next-intl/server";
import Link from "next/link";
import React from "react";
import CardNormal from "src/components/Cards/CardNormal";
import ProductCarousel from "src/components/Carousel/ProductCarousel";
import graphql from "src/utils/graphql";

const gql = `
query Products_connection($locale: I18NLocaleCode, $page: Int, $pageSize: Int,$category:String,$brand:String) {
    products_connection(
        pagination: { page: $page, pageSize: $pageSize }
        locale: $locale
        sort: ["createdAt:desc"]
        filters: { 
            or:[
                {brand: { slug: { eqi: $brand } }}
                {category:{ slug: { eqi: $category } }}
            ]
         }
    ) {
        nodes {
            title
            documentId
            images {
                alternativeText
                documentId
                url
            }
            category {
                documentId
                title
                slug
            }
            brand {
                title
                documentId
                slug
                image {
                  url
                  alternativeText
                  documentId
                }
            }
            slug
        }
    }
}
`
const getProducts = async (brand = "", category = "") => {
  const locale = await getLocale()
  const products = await graphql(gql, {
    page: 1,
    pageSize: 20,
    locale: "en",
    brand: brand,
    category: category
  })

  return products.products_connection.nodes;

}
const Products = async () => {
  const products1 = await getProducts("active")
  const products2 = await getProducts("", "construction")

  const t = await getMessages()
  return (
    <div className="my-20 max-w-screen-xl mx-auto px-4">


      <div>
        <ProductCarousel products={products1} subtitle={""} title={t.HomePage.products.title[0]} showMoreLink={"/products/active"} />
      </div>

      {/* <div>
        <ProductCarousel products={products2} subtitle={""} title={t.HomePage.products.title[1]} showMoreLink={"/products/construction"} />
      </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>

  );
};

export default Products;