import { getLocale } from "next-intl/server";
import ProductsListingPage from "./components/Products";
import Content from "./components/Content";
import graphql from "src/utils/graphql";





const gql = `
query Brands($locale: I18NLocaleCode, $slug: String) {
    brands(filters: { or: [{ slug: { eqi: $slug } }] }, locale: $locale) {
        title
        documentId
        image {
            documentId
            alternativeText
            url
        }
        description
    }
    categories(filters: { or: [{ slug: { eqi: $slug } }] }, locale: $locale) {
        documentId
        title
        image {
            documentId
            alternativeText
            url
        }
        description
    }
}
`

const getContent = async (locale, slug) => {
  const { brands, categories } = await graphql(gql, {
    locale,
    slug
  })
  return [...(brands ?? []), ...(categories ?? [])]?.[0]
}

const CategoriesData = async ({ category }) => {
  const locale = await getLocale()
  const content = await getContent(locale, category)


  return (
    <>

      <div className={`container-none md:container mx-auto p-4  flex flex-col md:flex-row mt-10 ${locale === "en" ? "ltr" : "rtl"}`}>


        <ProductsListingPage category={category} />

      </div>
      {
        content?.title &&
        <Content content={content} />
      }

    </>
  );
};

export default CategoriesData;
