"use client";
import { jsx as e, jsxs as h } from "react/jsx-runtime";
import { useState as y } from "react";
import a from "../../modules/ProductsDisplay/productsDisplay.module.css";
import { useProductsData as f } from "./useProductsData.es.js";
import { ProductsDisplayTabs as T } from "./components/ProductsDisplayTabs/ProductsDisplayTabs.es.js";
import { Typography as l } from "../../components/Typography/Typography.es.js";
import { ProductGallery as g } from "../../components/ProductGallery/ProductGallery.es.js";
const L = ({ labelText: d, productDisplays: c }) => {
  var i, o;
  const { isTabbed: t, title: m, description: n, tabs: r, slidesByTabs: p } = f({
    productDisplays: c
  }), [s, b] = y((o = (i = r[0]) == null ? void 0 : i.value) != null ? o : ""), u = t ? /* @__PURE__ */ e(T, { label: d, tabs: r, activeTab: s, onTabChange: b }) : /* @__PURE__ */ h("div", { className: a.header, children: [
    /* @__PURE__ */ e(l, { className: a.headerTitle, defaultVariant: "displayMd", mobileVariant: "headingLg", children: m }),
    /* @__PURE__ */ e(l, { defaultVariant: "bodyLg", mobileVariant: "bodySm", children: n })
  ] });
  return /* @__PURE__ */ e("section", { className: a.root, children: /* @__PURE__ */ e(g, { header: u, slides: p[s], isTabbed: t }) });
};
export {
  L as ProductsDisplay
};
