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";
import CounterDetail from "./components/CounterDetail";
import { getLocale } from "next-intl/server";

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 gql_stats = `
query Stats($locale:I18NLocaleCode) {
    stats(locale: $locale) {
        title
        stat
        subtitle
        documentId
    }
}
`


const getStats = async () => {
  const locale =await  getLocale()
  console.log("locale",locale)
  const stats = await graphql(gql_stats, {
    locale: locale
  })

  return stats.stats

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

  return products.products_connection.nodes;

}

const Landing = async () => {
  const products = await getProducts()
  const stats = await getStats()

  return (
    <div className=" text-center text-6xl">
      {" "}
      <Navbar theme={1} />
      {/* <HeroSection /> */}
      <AboutUs />
      <Sides />
      <CounterDetail stats={stats} />
      <Products products={products} />
      {/* <WhyHorizon/> */}
      <Footer />
    </div>
  );
};

export default Landing;