"use client";
import { jsx as e, jsxs as s } from "react/jsx-runtime";
import r from "../../modules/ResearchStudies/researchStudies.module.css";
import { Button as d } from "../../components/Button/Button.es.js";
import { EIconName as m } from "../../components/Icon/constants.es.js";
import { Typography as N } from "../../components/Typography/Typography.es.js";
import { StudyCard as v } from "./components/StudyCard/StudyCard.es.js";
import { StudiesSkeleton as C } from "./components/StudiesSkeleton/StudiesSkeleton.es.js";
const S = 6, E = ({
  studies: o,
  hasMoreButton: n,
  title: t,
  backButton: i,
  loading: c,
  onClickShowMore: h,
  trackingEvent: p,
  trackingLocation: f
}) => /* @__PURE__ */ e("div", { className: r.root, children: /* @__PURE__ */ s("div", { className: r.container, children: [
  /* @__PURE__ */ s("div", { className: r.header, children: [
    i && /* @__PURE__ */ e("div", { className: r.backButton, children: /* @__PURE__ */ e(
      d,
      {
        as: "a",
        href: i.href,
        size: "xs",
        prefixIcon: m.ARROW_BACK,
        variant: "ghost",
        children: i == null ? void 0 : i.label
      }
    ) }),
    /* @__PURE__ */ e(N, { defaultVariant: "displayXs", mobileVariant: "headingLg", children: t })
  ] }),
  /* @__PURE__ */ s("div", { className: r.studies, children: [
    o.map((a) => /* @__PURE__ */ e("div", { className: r.studyCard, children: /* @__PURE__ */ e(v, { ...a, trackingEvent: p, trackingLocation: f }) }, `${a.title}_${a.link}`)),
    c && Array.from({ length: S }).map((a, l) => /* @__PURE__ */ e("div", { className: r.studyCard, children: /* @__PURE__ */ e(C, {}, l) }, l))
  ] }),
  n && /* @__PURE__ */ e("div", { className: r.buttonContainer, children: /* @__PURE__ */ e(d, { size: "lg", variant: "muted", prefixIcon: m.PLUS, onClick: h, children: "show more" }) })
] }) });
export {
  E as ResearchStudies
};
