"use client";
import { jsxs as d, jsx as o } from "react/jsx-runtime";
import { cn as t } from "../../../../utils/cn/cn.es.js";
import r from "../../../../modules/IngredientHighlight/components/Ingredient/ingredient.module.css";
import { Typography as c } from "../../../../components/Typography/Typography.es.js";
const f = ({ title: l, description: i, isOpen: e, index: a, onClick: s }) => /* @__PURE__ */ d("div", { onClick: () => s(a != null ? a : 0), className: t(r.root, { [r.rootOpened]: e }), children: [
  /* @__PURE__ */ o("div", { className: r.header, children: /* @__PURE__ */ o(c, { defaultVariant: "headingXs", color: `color-text-primary${e ? "" : "-disabled"}`, children: l }) }),
  !!i && /* @__PURE__ */ o("div", { className: t(r.description, { [r.descriptionShow]: e }), children: /* @__PURE__ */ o("div", { className: r.descriptionInner, children: /* @__PURE__ */ o(c, { as: "p", defaultVariant: "bodySm", children: i }) }) })
] });
export {
  f as Ingredient
};
