"use client";
import { jsx as t, jsxs as a } from "react/jsx-runtime";
import { useState as m } from "react";
import s from "../../modules/IngredientHighlight/ingredientHighlight.module.css";
import { Ingredient as l } from "./components/Ingredient/Ingredient.es.js";
const I = ({ items: n }) => {
  const [r, c] = m(0), o = (i) => {
    c((e) => e === i ? e : i);
  };
  return /* @__PURE__ */ t("section", { className: s.root, children: /* @__PURE__ */ a("div", { className: s.container, children: [
    /* @__PURE__ */ t("div", { className: s.imageContainer, children: /* @__PURE__ */ t("img", { src: n[r].image, alt: "background image", className: s.image }) }),
    /* @__PURE__ */ t("div", { className: s.ingredients, children: n.map((i, e) => /* @__PURE__ */ t(
      l,
      {
        title: i.title,
        description: i.description,
        isOpen: r === e,
        index: e,
        onClick: o
      },
      e
    )) })
  ] }) });
};
export {
  I as IngredientHighlight
};
