import Navbar from "src/components/NavBar";
import AboutUs from "./components/AboutUs";
import Footer from "./components/Footer";
import Products from "./components/Products";
import Sides from "./components/Sides";
import graphql from "src/utils/graphql";

const gql = `
query Products_connection($locale: I18NLocaleCode, $page: Int, $pageSize: Int) {
    products_connection(
        pagination: { page: $page, pageSize: $pageSize }
        locale: $locale,
        sort: ["createdAt:asc"]
    ) {
        nodes {
            title
            documentId
            images {
                alternativeText
                documentId
                url
            }
            category {
                documentId
                title
                slug
            }
            brand {
                title
                documentId
                slug
            }
            slug
        }
    }
}

`

const getProducts = async () => {
  const products = await graphql(gql, {
    page: 1,
    pageSize: 20,
    locale: "en"
  })

  return products.products_connection.nodes;

}

const Landing = async () => {
  const products = await getProducts()
  console.log(products)
  return (
    <div className=" text-center text-6xl">
      {" "}
      <Navbar theme={1} />
      {/* <HeroSection /> */}
      <AboutUs />
      <Sides />
      {/* <CounterDetail /> */}
      <Products products={products} />
      {/* <WhyHorizon/> */}
      <Footer />
    </div>
  );
};

export default Landing;