"use client";
import { jsx as i, jsxs as n } from "react/jsx-runtime";
import { useState as h } from "react";
import { cn as t } from "../../../../utils/cn/cn.es.js";
import a from "../../../../modules/ProgramDetails/components/Features/features.module.css";
import { Typography as s } from "../../../../components/Typography/Typography.es.js";
import { IconBracket as p } from "../../../../components/IconBracket/IconBracket.es.js";
import { Label as b } from "../../../../components/Label/Label.es.js";
const V = ({ features: c }) => {
  const [o, m] = h(0);
  return /* @__PURE__ */ i("div", { className: a.root, children: c.map((e, r) => /* @__PURE__ */ n("div", { className: a.feature, children: [
    /* @__PURE__ */ n(
      "button",
      {
        className: a.header,
        onClick: () => m((l) => r === l ? null : r),
        children: [
          /* @__PURE__ */ i(s, { as: "h4", defaultVariant: "headingSm", mobileVariant: "headingSm", weight: "regular", children: e.label }),
          e.description && /* @__PURE__ */ i(p, { variant: o === r ? "close" : "plus", size: "sm" })
        ]
      }
    ),
    /* @__PURE__ */ i("div", { className: t(a.content, o === r && a.contentActive), children: /* @__PURE__ */ n("div", { className: t(a.contentInner), children: [
      e.description && /* @__PURE__ */ i(s, { as: "p", defaultVariant: "bodyXs", weight: "regular", children: e.description }),
      e.info && /* @__PURE__ */ n("div", { className: a.info, children: [
        /* @__PURE__ */ i(s, { defaultVariant: "bodyXs", children: e.info.label }),
        /* @__PURE__ */ i("div", { className: a.labels, children: e.info.labels.map((l, d) => /* @__PURE__ */ i(b, { color: "black", size: "sm", children: l }, `${l}-${d}`)) })
      ] })
    ] }) })
  ] }, `${e.label}-${r}`)) });
};
export {
  V as Features
};
