"use client";
import { jsxs as i, jsx as r } from "react/jsx-runtime";
import { cn as t } from "../../utils/cn/cn.es.js";
import e from "../../components/FAQComponentItem/faqComponentItem.module.css";
import { Typography as m } from "../Typography/Typography.es.js";
import { Icon as c } from "../Icon/Icon.es.js";
import { EIconName as s } from "../Icon/constants.es.js";
const u = ({ title: n, content: d, isOpen: o, index: a, onClick: l }) => /* @__PURE__ */ i("div", { className: e.root, children: [
  /* @__PURE__ */ i("div", { onClick: () => l(a != null ? a : 0), className: t(e.header, { [e.headerSticky]: o }), children: [
    /* @__PURE__ */ r(m, { defaultVariant: "headingMd", mobileVariant: "headingXxs", children: n }),
    /* @__PURE__ */ i("div", { className: e.closeButtonWrapper, children: [
      /* @__PURE__ */ r(c, { name: s.BRACKET_LEFT }),
      /* @__PURE__ */ r(
        "div",
        {
          className: t(e.closeButton, {
            [e.closeButtonActive]: o
          }),
          children: /* @__PURE__ */ r(c, { name: s.PLUS_BOLD })
        }
      ),
      /* @__PURE__ */ r(c, { name: s.BRACKET_RIGHT })
    ] })
  ] }),
  /* @__PURE__ */ r("div", { className: t(e.description, { [e.descriptionShow]: o }), children: /* @__PURE__ */ r("div", { className: e.descriptionInner, children: /* @__PURE__ */ r(m, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyXs", children: d }) }) }),
  /* @__PURE__ */ r("div", { className: e.leftBorder }),
  /* @__PURE__ */ r("div", { className: e.rightBorder })
] });
export {
  u as FAQComponentItem
};
